52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import { useNavigate } from 'react-router-dom';
|
|
import styled from '@emotion/styled';
|
|
import { IconCalendarEvent, IconMailCog } from 'twenty-ui';
|
|
|
|
import { SettingsNavigationCard } from '@/settings/components/SettingsNavigationCard';
|
|
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
|
|
import { SettingsPath } from '@/types/SettingsPath';
|
|
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
|
import { Section } from '@/ui/layout/section/components/Section';
|
|
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
|
|
|
|
const StyledCardsContainer = styled.div`
|
|
display: flex;
|
|
gap: ${({ theme }) => theme.spacing(4)};
|
|
margin-top: ${({ theme }) => theme.spacing(6)};
|
|
`;
|
|
|
|
export const SettingsAccountsSettingsSection = () => {
|
|
const navigate = useNavigate();
|
|
const isCalendarEnabled = useIsFeatureEnabled('IS_CALENDAR_ENABLED');
|
|
|
|
return (
|
|
<Section>
|
|
<H2Title
|
|
title="Settings"
|
|
description="Configure your emails and calendar settings."
|
|
/>
|
|
<StyledCardsContainer>
|
|
<SettingsNavigationCard
|
|
Icon={IconMailCog}
|
|
title="Emails"
|
|
onClick={() =>
|
|
navigate(getSettingsPagePath(SettingsPath.AccountsEmails))
|
|
}
|
|
>
|
|
Set email visibility, manage your blocklist and more.
|
|
</SettingsNavigationCard>
|
|
<SettingsNavigationCard
|
|
Icon={IconCalendarEvent}
|
|
title="Calendar"
|
|
soon={!isCalendarEnabled}
|
|
onClick={() =>
|
|
navigate(getSettingsPagePath(SettingsPath.AccountsCalendars))
|
|
}
|
|
>
|
|
Configure and customize your calendar preferences.
|
|
</SettingsNavigationCard>
|
|
</StyledCardsContainer>
|
|
</Section>
|
|
);
|
|
};
|