50 lines
1.5 KiB
JavaScript
50 lines
1.5 KiB
JavaScript
import { Chip as MuiChip } from "@mui/material";
|
|
import { styled } from "@mui/material/styles";
|
|
|
|
const PREFIX = "Chip";
|
|
|
|
const classes = {
|
|
chip: `${PREFIX}-chip`,
|
|
};
|
|
|
|
const StyledMuiChip = styled(MuiChip, {
|
|
shouldForwardProp: prop => prop !== "template" && prop !== "strong",
|
|
})(({ theme, template, strong }) => {
|
|
return {
|
|
[`&.${classes.chip}`]: {
|
|
height: "21px",
|
|
borderRadius: "16px",
|
|
backgroundColor: template
|
|
? template === "purple"
|
|
? theme.colors.special["olyZaps"]
|
|
: template === "gray"
|
|
? theme.colors.gray[500]
|
|
: template === "darkGray"
|
|
? theme.colors.primary[300]
|
|
: theme.colors.feedback[template]
|
|
: theme.palette.mode === "light"
|
|
? theme.colors.gray[90]
|
|
: theme.colors.gray[10],
|
|
"& span": {
|
|
fontSize: "12px",
|
|
lineHeight: "18px",
|
|
color:
|
|
theme.palette.mode === "light"
|
|
? theme.colors.gray[700]
|
|
: template === "gray"
|
|
? theme.colors.gray[10]
|
|
: template === "darkGray"
|
|
? theme.colors.gray[800]
|
|
: theme.colors.gray[600],
|
|
fontWeight: strong ? 700 : 450,
|
|
},
|
|
},
|
|
};
|
|
});
|
|
|
|
const Chip = ({ template, strong = false, ...props }) => {
|
|
return <StyledMuiChip className={classes.chip} template={template} strong={strong} {...props} />;
|
|
};
|
|
|
|
export default Chip;
|