31 lines
754 B
TypeScript
31 lines
754 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 function H1Title({
|
|
title,
|
|
fontColor = H1TitleFontColor.Tertiary,
|
|
}: OwnProps) {
|
|
return <StyledTitle fontColor={fontColor}>{title}</StyledTitle>;
|
|
}
|