|
|
|
import { styled, Typography, TypographyProps } from '@mui/material';
|
|
|
|
|
|
|
|
import { TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME';
|
|
|
|
|
|
|
|
const PREFIX = 'BodyText';
|
|
|
|
|
|
|
|
const classes = {
|
|
|
|
selected: `${PREFIX}-selected`,
|
|
|
|
unselected: `${PREFIX}-unselected`,
|
|
|
|
};
|
|
|
|
|
|
|
|
const StyledTypography = styled(Typography)(() => ({
|
|
|
|
[`&.${classes.selected}`]: {
|
|
|
|
color: TEXT,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`&.${classes.unselected}`]: {
|
|
|
|
color: UNSELECTED,
|
|
|
|
},
|
|
|
|
}));
|
|
|
|
|
|
|
|
type BodyTextProps = TypographyProps & {
|
|
|
|
text: string;
|
|
|
|
selected?: boolean;
|
|
|
|
};
|
|
|
|
|
|
|
|
const BodyText = ({ sx, text, selected }: BodyTextProps): JSX.Element => {
|
|
|
|
return (
|
|
|
|
<StyledTypography
|
|
|
|
{...{ sx }}
|
|
|
|
className={selected ? classes.selected : classes.unselected}
|
|
|
|
variant="subtitle1"
|
|
|
|
>
|
|
|
|
{text}
|
|
|
|
</StyledTypography>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
BodyText.defaultProps = {
|
|
|
|
selected: true,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default BodyText;
|