44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { useNavigate } from 'react-router-dom';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { SettingsNavigationCard } from '@/settings/components/SettingsNavigationCard';
|
|
import { IconCalendarEvent, IconMailCog } from '@/ui/display/icon';
|
|
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
|
import { Section } from '@/ui/layout/section/components/Section';
|
|
|
|
const StyledCardsContainer = styled.div`
|
|
display: flex;
|
|
gap: ${({ theme }) => theme.spacing(4)};
|
|
margin-top: ${({ theme }) => theme.spacing(6)};
|
|
`;
|
|
|
|
export const SettingsAccountsSettingsSection = () => {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<Section>
|
|
<H2Title
|
|
title="Settings"
|
|
description="Configure your emails and calendar settings."
|
|
/>
|
|
<StyledCardsContainer>
|
|
<SettingsNavigationCard
|
|
Icon={IconMailCog}
|
|
title="Emails"
|
|
onClick={() => navigate('/settings/accounts/emails')}
|
|
>
|
|
Set email visibility, manage your blocklist and more.
|
|
</SettingsNavigationCard>
|
|
<SettingsNavigationCard
|
|
Icon={IconCalendarEvent}
|
|
title="Calendar"
|
|
disabled
|
|
hasSoonPill
|
|
>
|
|
Configure and customize your calendar preferences.
|
|
</SettingsNavigationCard>
|
|
</StyledCardsContainer>
|
|
</Section>
|
|
);
|
|
};
|