Charles Bochet
29 lines
769 B
TypeScript
29 lines
769 B
TypeScript
import React from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
|
|
|
|
type Props = React.PropsWithChildren & {
|
|
animate?: boolean;
|
|
};
|
|
|
|
const StyledTitle = styled.div`
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
font-size: ${({ theme }) => theme.font.size.xl};
|
|
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
|
margin-bottom: ${({ theme }) => theme.spacing(4)};
|
|
margin-top: ${({ theme }) => theme.spacing(4)};
|
|
`;
|
|
|
|
export function Title({ children, animate = false }: Props) {
|
|
if (animate) {
|
|
return (
|
|
<StyledTitle>
|
|
<AnimatedEaseIn>{children}</AnimatedEaseIn>
|
|
</StyledTitle>
|
|
);
|
|
}
|
|
|
|
return <StyledTitle>{children}</StyledTitle>;
|
|
}
|