gitstart-twenty
00a3c8ca2b
* Change to using arrow functions Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> * Add lint rule --------- Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> Co-authored-by: Charles Bochet <charles@twenty.com>
29 lines
744 B
TypeScript
29 lines
744 B
TypeScript
import styled from '@emotion/styled';
|
|
|
|
type OwnProps = {
|
|
title: string;
|
|
fontColor?: H1TitleFontColor;
|
|
};
|
|
|
|
export enum H1TitleFontColor {
|
|
Primary = 'primary',
|
|
Secondary = 'secondary',
|
|
Tertiary = 'tertiary',
|
|
}
|
|
|
|
const StyledTitle = styled.h2<{
|
|
fontColor: H1TitleFontColor;
|
|
}>`
|
|
color: ${({ theme, fontColor }) => theme.font.color[fontColor]};
|
|
font-size: ${({ theme }) => theme.font.size.lg};
|
|
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
|
line-height: ${({ theme }) => theme.text.lineHeight.md};
|
|
margin: 0;
|
|
margin-bottom: ${({ theme }) => theme.spacing(4)};
|
|
`;
|
|
|
|
export const H1Title = ({
|
|
title,
|
|
fontColor = H1TitleFontColor.Tertiary,
|
|
}: OwnProps) => <StyledTitle fontColor={fontColor}>{title}</StyledTitle>;
|