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 | 4x 4x 4x 4x | import React from "react";
import { Text } from "@common/Text";
import { Box, BoxProps, styled } from "@mui/material";
import { palette } from "@palette";
export type SectionBarListItem<T> = {
title: T;
Icon?: JSX.Element;
disabled?: boolean;
}
type SectionBarItemProps<T> = SectionBarListItem<T> & BoxProps & {
active: boolean;
}
const SectionBarItem = <T extends string> ({
title,
active,
Icon,
disabled = false,
...props
}: SectionBarItemProps<T>) => {
const getTextColor = () => {
if (disabled) return "#D1D1D0";
return active ? "#403D3D" : "#8F8F8F";
}
const textColor = getTextColor();
return (
<StyledTabItem
disabled={disabled}
active={active}
{...props}
>
{Icon && React.cloneElement(Icon, {
color: textColor,
path_fill: textColor,
stroke: textColor,
width: 28,
height: 28,
})}
<Text
sx={{
...titleStyle,
color: textColor
}}
>
{title}
</Text>
</StyledTabItem>
);
};
const titleStyle = {
fontWeight: 400,
fontSize: "14px",
lineHeight: "17px",
whiteSpace: "nowrap",
fontFamily: "Give Whyte",
"@media (max-width: 750px)": {
display: "none"
}
};
const StyledTabItem = styled(Box, {
shouldForwardProp: (prop) =>
prop !== "disabled" &&
prop !== "active"
})(({ disabled, active }: { disabled: boolean, active: boolean }) => ({
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
padding: "4px 8px",
gap: "8px",
borderRadius: "8px",
cursor: "default",
backgroundColor: "inherit",
...(!disabled && !active && {
"&:hover": {
background: "#F8F8F6",
cursor: "pointer",
},
}),
...(active && {
backgroundColor: "#E1E1DE",
}),
}));
export default SectionBarItem;
|