feat: add Settings/Accounts Connected Accounts section with empty state (#2870)

Closes #2817

front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx

@@ -0,0 +1,14 @@
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Section } from '@/ui/layout/section/components/Section';
+
+import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard';
+
+export const SettingsAccountsConnectedAccountsSection = () => (
+  <Section>
+    <H2Title
+      title="Connected accounts"
+      description="Manage your internet accounts."
+    />
+    <SettingsAccountsEmptyStateCard />
+  </Section>
+);

front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx

@@ -0,0 +1,41 @@
+import styled from '@emotion/styled';
+
+import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
+import { Button } from '@/ui/input/button/components/Button';
+import { Card } from '@/ui/layout/card/components/Card';
+
+const StyledCard = styled(Card)`
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  overflow: hidden;
+  padding: 0;
+`;
+
+const StyledHeader = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.primary};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  height: ${({ theme }) => theme.spacing(6)};
+  padding: ${({ theme }) => theme.spacing(2, 4)};
+`;
+
+const StyledBody = styled.div`
+  display: flex;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(4)};
+`;
+
+export const SettingsAccountsEmptyStateCard = () => (
+  <StyledCard>
+    <StyledHeader>No connected account</StyledHeader>
+    <StyledBody>
+      <Button
+        Icon={IconGoogle}
+        title="Connect with Google"
+        variant="secondary"
+      />
+    </StyledBody>
+  </StyledCard>
+);

front/src/pages/settings/accounts/SettingsAccounts.tsx

@@ -1,3 +1,4 @@
+import { SettingsAccountsConnectedAccountsSection } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsSection';
 import { SettingsAccountsSettingsSection } from '@/settings/accounts/components/SettingsAccountsSettingsSection';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { IconSettings } from '@/ui/display/icon';
@@ -8,6 +9,7 @@ export const SettingsAccounts = () => (
   <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
     <SettingsPageContainer>
       <Breadcrumb links={[{ children: 'Accounts' }]} />
+      <SettingsAccountsConnectedAccountsSection />
       <SettingsAccountsSettingsSection />
     </SettingsPageContainer>
   </SubMenuTopBarContainer>