58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
import { useTheme } from '@emotion/react';
|
||
import styled from '@emotion/styled';
|
||
|
||
import { Account } from '@/accounts/types/Account';
|
||
import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia';
|
||
import { IconSend } from '@/ui/display/icon';
|
||
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
||
import { Toggle } from '@/ui/input/components/Toggle';
|
||
import { Card } from '@/ui/layout/card/components/Card';
|
||
import { CardContent } from '@/ui/layout/card/components/CardContent';
|
||
import { Section } from '@/ui/layout/section/components/Section';
|
||
|
||
const StyledCardContent = styled(CardContent)`
|
||
align-items: center;
|
||
display: flex;
|
||
gap: ${({ theme }) => theme.spacing(4)};
|
||
padding: ${({ theme }) => theme.spacing(2, 4)};
|
||
`;
|
||
|
||
const StyledTitle = styled.span`
|
||
color: ${({ theme }) => theme.font.color.primary};
|
||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||
margin-right: auto;
|
||
`;
|
||
|
||
type SettingsAccountsInboxSettingsContactAutoCreateSectionProps = {
|
||
account: Account;
|
||
onToggle: (value: boolean) => void;
|
||
};
|
||
|
||
export const SettingsAccountsInboxSettingsContactAutoCreateSection = ({
|
||
account,
|
||
onToggle,
|
||
}: SettingsAccountsInboxSettingsContactAutoCreateSectionProps) => {
|
||
const theme = useTheme();
|
||
|
||
return (
|
||
<Section>
|
||
<H2Title
|
||
title="Contact auto-creation"
|
||
description="Automatically create contacts for people you’ve sent emails to"
|
||
/>
|
||
<Card>
|
||
<StyledCardContent>
|
||
<SettingsAccountsInboxSettingsCardMedia>
|
||
<IconSend size={theme.icon.size.sm} stroke={theme.icon.stroke.lg} />
|
||
</SettingsAccountsInboxSettingsCardMedia>
|
||
<StyledTitle>Auto-creation</StyledTitle>
|
||
<Toggle
|
||
value={account.isContactAutoCreationEnabled}
|
||
onChange={onToggle}
|
||
/>
|
||
</StyledCardContent>
|
||
</Card>
|
||
</Section>
|
||
);
|
||
};
|