50 lines
1.3 KiB
JavaScript
50 lines
1.3 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, inactives, isSm, style }) {
|
|
return (
|
|
<Box className="!border-none !w-full">
|
|
<TabsMUI
|
|
value={value}
|
|
onChange={handleChange}
|
|
sx={{
|
|
...style,
|
|
".MuiTabs-fixed": {
|
|
overflow: "auto !important",
|
|
},
|
|
}}
|
|
>
|
|
{listTab.map((item, idx) => (
|
|
<Tab
|
|
key={idx}
|
|
label={item}
|
|
disabled={inactives && inactives.includes(idx)}
|
|
{...a11yProps(idx)}
|
|
sx={{
|
|
"&.MuiButtonBase-root": {
|
|
width: !isSm && "fit-content !important",
|
|
minWidth: !isSm && "fit-content !important",
|
|
},
|
|
"&.MuiButtonBase-root:first-child": {
|
|
marginLeft: !isSm && "9px !important",
|
|
},
|
|
}}
|
|
className={`
|
|
text-[#495057] !p-1 !text-[14px] md:!text-[16px] !font-bold
|
|
${isSm ? "!w-1/2 !m-0" : "!mr-[38px]"}
|
|
`}
|
|
/>
|
|
))}
|
|
</TabsMUI>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default Tabs;
|