gitstart-twenty
77a1840611
Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
type SectionProps = {
|
|
children: ReactNode;
|
|
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]};
|
|
margin-bottom: ${({ theme }) => theme.spacing(4)};
|
|
margin-top: ${({ theme }) => theme.spacing(4)};
|
|
text-align: ${({ alignment }) => alignment};
|
|
width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
|
|
`;
|
|
|
|
export const Section = ({
|
|
children,
|
|
alignment = SectionAlignment.Left,
|
|
fullWidth = true,
|
|
fontColor = SectionFontColor.Primary,
|
|
}: SectionProps) => (
|
|
<StyledSection
|
|
alignment={alignment}
|
|
fullWidth={fullWidth}
|
|
fontColor={fontColor}
|
|
>
|
|
{children}
|
|
</StyledSection>
|
|
);
|