42 lines
1.2 KiB
React
42 lines
1.2 KiB
React
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
import { Box } from "@mui/material";
|
|
import { useTheme } from "@emotion/react";
|
|
|
|
/**
|
|
* TabPanel component that displays content for the selected tab.
|
|
*
|
|
* @component
|
|
* @param {Object} props - The component props.
|
|
* @param {React.ReactNode} props.children - The content to be displayed when this tab panel is selected.
|
|
* @param {number} props.value - The currently selected tab value.
|
|
* @param {number} props.index - The index of this specific tab panel.
|
|
* @param {Object} props.other - Any additional props to be spread to the root element.
|
|
* @returns {React.ReactElement|null} The rendered tab panel or null if not selected.
|
|
*/
|
|
function TabPanel({ children, value, index, ...other }) {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<div
|
|
role="tabpanel"
|
|
hidden={value !== index}
|
|
id={`notification-tabpanel-${index}`}
|
|
aria-labelledby={`notification-tab-${index}`}
|
|
{...other}
|
|
>
|
|
{value === index && <Box sx={{ pt: theme.spacing(3) }}>{children}</Box>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
TabPanel.propTypes = {
|
|
children: PropTypes.node,
|
|
|
|
index: PropTypes.number.isRequired,
|
|
|
|
value: PropTypes.number.isRequired,
|
|
};
|
|
|
|
export default TabPanel;
|