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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | 4x 4x 4x 4x | import React from "react";
import { Text } from "@common/Text";
import { Box, Stack, BoxProps, styled } from "@mui/material";
import { palette } from "@palette";
export type TabListItem<T> = {
name: T;
LeftIcon?: JSX.Element;
RightIcon?: JSX.Element;
disabled?: boolean;
};
type TabListProps<T> = TabListItem<T> &
BoxProps & {
active: boolean;
};
const TabBarItem = <T extends string>({
name,
active,
LeftIcon,
RightIcon,
disabled = false,
...props
}: TabListProps<T>) => {
const textColor = getTextColor(active, disabled);
return (
<StyledTabItem disabled={disabled} active={active} {...props}>
<Stack direction="row" spacing={1} alignItems="center" height="32px">
{LeftIcon &&
React.cloneElement(LeftIcon, {
color: textColor,
path_fill: textColor,
stroke: textColor,
width: 24,
})}
<Text
variant="headline"
align="center"
lineHeight="17px"
color={textColor}
sx={(theme) => ({
[theme.breakpoints.down("sm")]: {
display: "none",
},
})}
>
{name}
</Text>
{RightIcon &&
React.cloneElement(RightIcon, {
color: textColor,
path_fill: textColor,
stroke: textColor,
width: 24,
})}
</Stack>
</StyledTabItem>
);
};
const getTextColor = (active: boolean, disabled = false) => {
if (disabled) return palette.liftedWhite[300];
return active ? palette.black[200] : palette.gray[300];
};
const StyledTabItem = styled(Box, {
shouldForwardProp: (prop) => prop !== "disabled" && prop !== "active",
})(({ disabled, active }: { disabled: boolean; active: boolean }) => ({
width: "100%",
flexGrow: 1,
padding: "8px",
background: palette.liftedWhite.main,
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "relative",
cursor: "default",
"@media (max-width: 600px)": {
height: "48px",
},
...(disabled && {
pointerEvents: 'none'
}),
...(active && {
background: palette.liftedWhite[200],
}),
...(!disabled &&
!active && {
"&:hover": {
backgroundColor: palette.liftedWhite[100],
cursor: "pointer",
},
}),
}));
export default TabBarItem;
|