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 84 85 86 | import { Box, TypographyProps } from "@mui/material";
import { Text } from "@common/Text";
import { palette } from "@palette";
type MerchantCategoryCodesTabsProps = {
setTab: React.Dispatch<React.SetStateAction<"all" | "added">>;
listLength: number;
tab: "all" | "added";
};
interface TabItemProps extends TypographyProps {
isActive: boolean;
handleClick: () => void;
}
const MerchantCategoryCodesTabs = ({
tab,
setTab,
listLength,
}: MerchantCategoryCodesTabsProps) => {
return (
<Box
sx={{
height: "40px",
display: "flex",
alignItems: "center",
flexDirection: "row",
gap: 5,
"@media (max-width: 600px)": {
justifyContent: "space-around",
width: "100%",
},
}}
>
<TabItem isActive={tab === "all"} handleClick={() => setTab("all")}>
All Categories
</TabItem>
<TabItem isActive={tab === "added"} handleClick={() => setTab("added")}>
Added Categories
<Box
component="span"
sx={{
...spanStyle,
backgroundColor:
tab === "added" ? palette.info.soft : palette.liftedWhite[100],
}}
>
{listLength}
</Box>
</TabItem>
</Box>
);
};
const TabItem = ({ isActive, handleClick, children }: TabItemProps) => {
return (
<Text
onClick={handleClick}
variant="button"
fontWeight="regular"
fontSize="16px"
lineHeight="16px"
sx={{
cursor: "pointer",
}}
color={isActive ? palette.filled.blue : palette.gray[100]}
>
{children}
</Text>
);
};
const spanStyle = {
height: "24px",
minWidth: "24px",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "row",
borderRadius: "32px",
marginLeft: "8px",
paddingInline: "8px",
};
export default MerchantCategoryCodesTabs;
|