fa0933b292
This PR was created by [GitStart](https://gitstart.com/) to address the requirements from this ticket: [TWNTY-7533](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7533). --- Description \ \ Move Section component from twenty-front to twenty-ui and update imports\ \ \ Fixes twentyhq/private-issues#85 Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
49 lines
1.0 KiB
TypeScript
49 lines
1.0 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
type SectionProps = {
|
|
children: ReactNode;
|
|
className?: string;
|
|
alignment?: SectionAlignment;
|
|
fullWidth?: boolean;
|
|
fontColor?: SectionFontColor;
|
|
};
|
|
|
|
export enum SectionAlignment {
|
|
Left = 'left',
|
|
Center = 'center',
|
|
}
|
|
|
|
export enum SectionFontColor {
|
|
Primary = 'primary',
|
|
Secondary = 'secondary',
|
|
Tertiary = 'tertiary',
|
|
}
|
|
|
|
const StyledSection = styled.div<{
|
|
alignment: SectionAlignment;
|
|
fullWidth: boolean;
|
|
fontColor: SectionFontColor;
|
|
}>`
|
|
color: ${({ theme, fontColor }) => theme.font.color[fontColor]};
|
|
text-align: ${({ alignment }) => alignment};
|
|
width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
|
|
`;
|
|
|
|
export const Section = ({
|
|
children,
|
|
className,
|
|
alignment = SectionAlignment.Left,
|
|
fullWidth = true,
|
|
fontColor = SectionFontColor.Primary,
|
|
}: SectionProps) => (
|
|
<StyledSection
|
|
className={className}
|
|
alignment={alignment}
|
|
fullWidth={fullWidth}
|
|
fontColor={fontColor}
|
|
>
|
|
{children}
|
|
</StyledSection>
|
|
);
|