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 | 4x 4x | import React from "react";
import { Box } from "@mui/material";
import TabBarItem, { TabListItem } from "./TabBarItem";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
type TabBarProps<T> = {
selectedTab: T;
setTab: React.Dispatch<React.SetStateAction<T>>;
tabList: TabListItem<T>[];
disabled?: boolean;
};
const TabBar = <T extends string>({
selectedTab,
setTab,
tabList,
disabled,
}: TabBarProps<T>) => {
const { isMobileView } = useCustomTheme();
const handleClickItem = (tab: TabListItem<T>) => {
if (tab.disabled) return;
setTab(tab.name);
};
return (
<Box sx={{ ...containerStyle, overflow: isMobileView ? "auto" : "hidden" }}>
{tabList.map((tab: TabListItem<T>, index: number) => (
<TabBarItem
disabled={disabled || tab.disabled}
key={index}
active={tab.name === selectedTab}
onClick={() => handleClickItem(tab)}
{...tab}
/>
))}
</Box>
);
};
const containerStyle = {
display: "flex",
border: "4px solid #ECECE9",
borderRadius: "12px",
marginInline: "16px",
};
export default TabBar;
|