You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
863 B
41 lines
863 B
import { |
|
Tab as MUITab, |
|
tabClasses as muiTabClasses, |
|
TabProps as MUITabProps, |
|
} from '@mui/material'; |
|
import { FC, useMemo } from 'react'; |
|
|
|
import { BLUE, BORDER_RADIUS, GREY } from '../lib/consts/DEFAULT_THEME'; |
|
|
|
import { BodyText } from './Text'; |
|
|
|
const Tab: FC<MUITabProps> = ({ label: originalLabel, ...restTabProps }) => { |
|
const label = useMemo( |
|
() => |
|
typeof originalLabel === 'string' ? ( |
|
<BodyText inheritColour>{originalLabel}</BodyText> |
|
) : ( |
|
originalLabel |
|
), |
|
[originalLabel], |
|
); |
|
|
|
return ( |
|
<MUITab |
|
{...restTabProps} |
|
label={label} |
|
sx={{ |
|
borderRadius: BORDER_RADIUS, |
|
color: GREY, |
|
padding: '.4em .8em', |
|
textTransform: 'none', |
|
|
|
[`&.${muiTabClasses.selected}`]: { |
|
color: BLUE, |
|
}, |
|
}} |
|
/> |
|
); |
|
}; |
|
|
|
export default Tab;
|
|
|