36 lines
953 B
JavaScript
36 lines
953 B
JavaScript
import { Tab as MuiTab, Tabs as MuiTabs } from "@mui/material";
|
|
import { styled } from "@mui/material/styles";
|
|
import React from "react";
|
|
const PREFIX = "Tabs";
|
|
|
|
const classes = {
|
|
root: `${PREFIX}-root`,
|
|
};
|
|
|
|
const StyledMuiTabs = styled(MuiTabs)(() => ({
|
|
[`&.${classes.root}`]: {
|
|
"&.MuiTabs-vertical": {
|
|
height: "auto",
|
|
minHeight: "auto",
|
|
},
|
|
" & .MuiTabs-scrollable": {
|
|
overflowY: "hidden",
|
|
},
|
|
},
|
|
}));
|
|
|
|
export const Tabs = ({ className = "", ...props }) => {
|
|
return (
|
|
<StyledMuiTabs textColor="primary" indicatorColor="primary" {...props} className={`${classes.root} ${className}`} />
|
|
);
|
|
};
|
|
|
|
const a11yProps = (index) => ({
|
|
id: `simple-tab-${index}`,
|
|
"aria-controls": `simple-tabpanel-${index}`,
|
|
});
|
|
|
|
export const Tab = ({ value, label, ...props }) => (
|
|
<MuiTab key={value} value={value} label={label} {...a11yProps(value)} {...props} />
|
|
);
|