feat: add Month headers to Show Page Calendar tab (#4326)

Closes #4288

packages/twenty-front/src/modules/ui/display/typography/components/H3Title.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+type H3TitleProps = {
+  title: ReactNode;
+  className?: string;
+};
+
+const StyledH3Title = styled.h3`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin: 0;
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
+export const H3Title = ({ title, className }: H3TitleProps) => {
+  return <StyledH3Title className={className}>{title}</StyledH3Title>;
+};

packages/twenty-front/src/modules/ui/display/typography/components/__stories__/H3Title.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { H3Title } from '../H3Title';
+
+const meta: Meta<typeof H3Title> = {
+  title: 'UI/Display/Typography/Title/H3Title',
+  component: H3Title,
+  decorators: [ComponentDecorator],
+  args: {
+    title: 'H3 title',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof H3Title>;
+
+export const Default: Story = {
+  decorators: [ComponentDecorator],
+};