feat: create Settings/Accounts/Calendars page (#4090)

* feat: create Settings/Accounts/Calendars page

Closes #4059

* docs: add SettingsAccountsCalendars stories

* refactor: add SettingsNavigationDrawerItem component

packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx

@@ -0,0 +1,22 @@
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
+import { IconSettings } from '@/ui/display/icon';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+
+export const SettingsAccountsCalendars = () => (
+  <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+    <SettingsPageContainer>
+      <Breadcrumb
+        links={[
+          {
+            children: 'Accounts',
+            href: getSettingsPagePath(SettingsPath.Accounts),
+          },
+          { children: 'Calendars' },
+        ]}
+      />
+    </SettingsPageContainer>
+  </SubMenuTopBarContainer>
+);

packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccountsCalendars.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { SettingsAccountsCalendars } from '../SettingsAccountsCalendars';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/Accounts/SettingsAccountsCalendars',
+  component: SettingsAccountsCalendars,
+  decorators: [PageDecorator],
+  args: {
+    routePath: getSettingsPagePath(SettingsPath.AccountsCalendars),
+  },
+  parameters: {
+    layout: 'fullscreen',
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsAccountsCalendars>;
+
+export const Default: Story = {};