Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 2x | /* eslint-disable react/prop-types */
import * as React from "react";
import PropTypes from "prop-types";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import { Box, Divider } from "@mui/material";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import { useState } from "react";
function TabPanel(props) {
const { value, index, children, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`full-width-tabpanel-${index}`}
aria-labelledby={`full-width-tab-${index}`}
{...other}
>
{value === index && <React.Fragment>{children}</React.Fragment>}
</div>
);
}
TabPanel.propTypes = {
value: PropTypes.number.isRequired,
index: PropTypes.number.isRequired,
children: PropTypes.node,
};
export default function TabsComponent({ tabContents }) {
const [value, setValue] = useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
tabContents && (
<Box sx={{ width: "100%" }}>
<Tabs value={value} onChange={handleChange}>
{tabContents.map((item, index) => (
<Tab
id={item.id ?? `tab-item-${typeof item.label === "string" ? item.label : index}`}
key={item.id ?? index}
value={index}
label={
item.locked ? (
<Box
component="span"
sx={{ display: "inline-flex", alignItems: "center", gap: 0.5 }}
>
{item.label}
<LockOutlinedIcon sx={{ fontSize: 14, opacity: 0.55 }} />
</Box>
) : (
item.label
)
}
/>
))}
</Tabs>
<Divider />
{tabContents.map((item, index) => (
<TabPanel key={index} value={value} index={index}>
{item.component}
</TabPanel>
))}
</Box>
)
);
}
// HOW TO USE
// import TabsComponent from "./TabsComponent";
// let data = [
// {
// label: "item one",
// component: "",
// },
// ];
// <TabsComponent tabContents={[{label: "item one", component: "",},]}/>
|