parent
823bb7110f
commit
1432e4969e
4 changed files with 86 additions and 0 deletions
@ -0,0 +1,40 @@ |
||||
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, |
||||
textTransform: 'none', |
||||
|
||||
[`&.${muiTabClasses.selected}`]: { |
||||
color: BLUE, |
||||
}, |
||||
}} |
||||
/> |
||||
); |
||||
}; |
||||
|
||||
export default Tab; |
@ -0,0 +1,16 @@ |
||||
import { ReactElement, useMemo } from 'react'; |
||||
|
||||
const TabContent = <T,>({ |
||||
changingTabId, |
||||
children, |
||||
tabId, |
||||
}: TabContentProps<T>): ReactElement => { |
||||
const isTabIdMatch = useMemo( |
||||
() => changingTabId === tabId, |
||||
[changingTabId, tabId], |
||||
); |
||||
|
||||
return <>{isTabIdMatch && children}</>; |
||||
}; |
||||
|
||||
export default TabContent; |
@ -0,0 +1,26 @@ |
||||
import { |
||||
Tabs as MUITabs, |
||||
tabsClasses as muiTabsClasses, |
||||
TabsProps as MUITabsProps, |
||||
} from '@mui/material'; |
||||
import { FC } from 'react'; |
||||
|
||||
import { BLUE, BORDER_RADIUS } from '../lib/consts/DEFAULT_THEME'; |
||||
|
||||
const Tabs: FC<MUITabsProps> = ({ |
||||
variant = 'fullWidth', |
||||
...restTabsProps |
||||
}) => ( |
||||
<MUITabs |
||||
{...restTabsProps} |
||||
variant={variant} |
||||
sx={{ |
||||
[`& .${muiTabsClasses.indicator}`]: { |
||||
backgroundColor: BLUE, |
||||
borderRadius: BORDER_RADIUS, |
||||
}, |
||||
}} |
||||
/> |
||||
); |
||||
|
||||
export default Tabs; |
@ -0,0 +1,4 @@ |
||||
type TabContentProps<T> = import('react').PropsWithChildren<{ |
||||
changingTabId: T; |
||||
tabId: T; |
||||
}>; |
Loading…
Reference in new issue