4a4e65fe4a
# Introduction closes https://github.com/twentyhq/core-team-issues/issues/591 Same than for `twenty-shared` made in https://github.com/twentyhq/twenty/pull/11083. ## TODO - [x] Manual migrate twenty-website twenty-ui imports ## What's next: - Generate barrel and migration script factorization within own package + tests - Refactoring using preconstruct ? TimeBox - Lint circular dependencies - Lint import from barrel and forbid them ### Preconstruct We need custom rollup plugins addition, but preconstruct does not expose its rollup configuration. It might be possible to handle this using the babel overrides. But was a big tunnel. We could give it a try afterwards ! ( allowing cjs interop and stuff like that ) Stuck to vite lib app Closed related PRs: - https://github.com/twentyhq/twenty/pull/11294 - https://github.com/twentyhq/twenty/pull/11203
61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { Card, CardContent } from 'twenty-ui/layout';
|
|
import { Toggle } from 'twenty-ui/input';
|
|
|
|
type Parameter = {
|
|
value: boolean;
|
|
title: string;
|
|
description: string;
|
|
onToggle: (value: boolean) => void;
|
|
};
|
|
|
|
type SettingsAccountsToggleSettingCardProps = {
|
|
parameters: Parameter[];
|
|
};
|
|
|
|
const StyledCardContent = styled(CardContent)`
|
|
align-items: center;
|
|
display: flex;
|
|
gap: ${({ theme }) => theme.spacing(4)};
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: ${({ theme }) => theme.background.transparent.lighter};
|
|
}
|
|
`;
|
|
|
|
const StyledTitle = styled.div`
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
margin-bottom: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
|
|
const StyledDescription = styled.div`
|
|
color: ${({ theme }) => theme.font.color.tertiary};
|
|
font-size: ${({ theme }) => theme.font.size.sm};
|
|
`;
|
|
|
|
const StyledToggle = styled(Toggle)`
|
|
margin-left: auto;
|
|
`;
|
|
|
|
export const SettingsAccountsToggleSettingCard = ({
|
|
parameters,
|
|
}: SettingsAccountsToggleSettingCardProps) => (
|
|
<Card rounded>
|
|
{parameters.map((parameter, index) => (
|
|
<StyledCardContent
|
|
key={index}
|
|
divider={index < parameters.length - 1}
|
|
onClick={() => parameter.onToggle(!parameter.value)}
|
|
>
|
|
<div>
|
|
<StyledTitle>{parameter.title}</StyledTitle>
|
|
<StyledDescription>{parameter.description}</StyledDescription>
|
|
</div>
|
|
<StyledToggle value={parameter.value} onChange={parameter.onToggle} />
|
|
</StyledCardContent>
|
|
))}
|
|
</Card>
|
|
);
|