parent
80467310df
commit
449ace0490
1 changed files with 30 additions and 5 deletions
@ -1,13 +1,38 @@ |
||||
import Typography from '@mui/material/Typography'; |
||||
import { styled } from '@mui/material/styles'; |
||||
import { styled, Typography, TypographyProps } from '@mui/material'; |
||||
import { FC, useMemo } from 'react'; |
||||
|
||||
import { TEXT } from '../../lib/consts/DEFAULT_THEME'; |
||||
|
||||
const WhiteTypography = styled(Typography)({ |
||||
color: TEXT, |
||||
}); |
||||
|
||||
const HeaderText = ({ text }: { text: string }): JSX.Element => ( |
||||
<WhiteTypography variant="h4">{text}</WhiteTypography> |
||||
type HeaderTextOptionalPropsWithoutDefault = { |
||||
text?: string; |
||||
}; |
||||
|
||||
type HeaderTextOptionalProps = HeaderTextOptionalPropsWithoutDefault; |
||||
|
||||
type HeaderTextProps = TypographyProps & HeaderTextOptionalProps; |
||||
|
||||
const HEADER_TEXT_DEFAULT_PROPS: HeaderTextOptionalPropsWithoutDefault = { |
||||
text: undefined, |
||||
}; |
||||
|
||||
const HeaderText: FC<HeaderTextProps> = ({ |
||||
children, |
||||
text, |
||||
...restHeaderTextProps |
||||
}) => { |
||||
const content = useMemo(() => children ?? text, [children, text]); |
||||
|
||||
return ( |
||||
<WhiteTypography variant="h4" {...restHeaderTextProps}> |
||||
{content} |
||||
</WhiteTypography> |
||||
); |
||||
}; |
||||
|
||||
HeaderText.defaultProps = HEADER_TEXT_DEFAULT_PROPS; |
||||
|
||||
export default HeaderText; |
||||
|
Loading…
Reference in new issue