48 lines
1.5 KiB
JavaScript
48 lines
1.5 KiB
JavaScript
import { Box, Tab, Tabs as TabsMUI } from '@mui/material';
|
|
|
|
function a11yProps(index) {
|
|
return {
|
|
id: `simple-tab-${index}`,
|
|
'aria-controls': `simple-tabpanel-${index}`,
|
|
};
|
|
};
|
|
|
|
function Tabs({ value, handleChange, listTab, isSm }) {
|
|
return (
|
|
<Box
|
|
className="!border-none"
|
|
>
|
|
<TabsMUI
|
|
value={value}
|
|
onChange={handleChange}
|
|
sx={{
|
|
'.MuiTabs-fixed': {
|
|
overflow: 'auto !important'
|
|
},
|
|
'.MuiTabs-indicator': {
|
|
height: isSm ? '4px' : '2px',
|
|
borderRadius: isSm ? '8px' : '10px',
|
|
background: '#F17732'
|
|
},
|
|
'& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
|
|
color: '#F17732 !important'
|
|
}
|
|
}}
|
|
>
|
|
{listTab.map((item, idx) => (
|
|
<Tab
|
|
key={idx}
|
|
label={item}
|
|
{...a11yProps(idx)}
|
|
className={`
|
|
text-[#495057] !p-1 !text-[14px] md:!text-[16px] !font-bold
|
|
${isSm ? '!w-1/2 !m-0' : '!mr-2'}
|
|
`}
|
|
/>
|
|
))}
|
|
</TabsMUI>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default Tabs |