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, Typography, TypographyProps } from '@mui/material'; |
||||||
import { styled } from '@mui/material/styles'; |
import { FC, useMemo } from 'react'; |
||||||
|
|
||||||
import { TEXT } from '../../lib/consts/DEFAULT_THEME'; |
import { TEXT } from '../../lib/consts/DEFAULT_THEME'; |
||||||
|
|
||||||
const WhiteTypography = styled(Typography)({ |
const WhiteTypography = styled(Typography)({ |
||||||
color: TEXT, |
color: TEXT, |
||||||
}); |
}); |
||||||
|
|
||||||
const HeaderText = ({ text }: { text: string }): JSX.Element => ( |
type HeaderTextOptionalPropsWithoutDefault = { |
||||||
<WhiteTypography variant="h4">{text}</WhiteTypography> |
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; |
export default HeaderText; |
||||||
|
Loading…
Reference in new issue