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 | 202x 127x 1743x 127x | import { styled } from "@mui/material/styles";
import MenuItem, { MenuItemProps } from "@mui/material/MenuItem";
import { Text } from "@common/Text";
import { palette } from "@palette";
import { Stack } from "@mui/material";
import { CheckIcon } from "@phosphor-icons/react";
export type SelectItemProps = MenuItemProps & {
helperText?: string;
error?: boolean;
warn?: boolean;
showCheckIcon?: boolean;
hoverBgColor?: string;
};
export const SelectItem = styled(
({
helperText,
error,
warn,
children,
showCheckIcon = false,
...rest
}: SelectItemProps) => {
return (
<MenuItem {...rest}>
<Stack justifyContent="space-between" direction="row">
{children}
{rest.selected && showCheckIcon && <CheckIcon size={20} />}
</Stack>
{helperText && (
<Text
sx={{
color: palette.neutral[70],
fontWeight: 350,
fontSize: "12px",
fontFamily: "Give Whyte",
}}
>
{helperText}
</Text>
)}
</MenuItem>
);
},
{
shouldForwardProp: (prop) =>
prop !== "error" && prop !== "warn" && prop !== "hoverBgColor",
},
)(({ theme, error, hidden, warn, hoverBgColor }) => ({
minHeight: "auto",
fontSize: "14px",
padding: "4px 8px",
borderRadius: "4px",
border: "1px solid transparent",
display: hidden ? "none" : "block",
[theme.breakpoints.down("sm")]: {
"& .MuiTypography-root ": {
lineHeight: "30px",
},
},
"& > #select-item": {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
"& > svg": {
display: "inline",
},
},
"&:not(:last-of-type)": {
marginBottom: "2px",
},
"&:hover": {
color: "initial",
background: hoverBgColor ? hoverBgColor : palette.neutral.white,
...(error && {
border: "1px solid transparent",
background: `${theme.palette.error.light}`,
}),
...(warn && {
color: `${palette.tag.error.text}`,
background: `${palette.tag.error.bg}`,
}),
},
"&.Mui-selected": {
color: "initial",
background: hoverBgColor ? "initial" : "none !important",
"&:hover": {
color: "initial",
background: hoverBgColor ? hoverBgColor : palette.neutral.white,
},
},
}));
|