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 | 9x 9x 9x 2440x 2440x 2440x 2440x 2440x 2440x | import { Chip } from "@mui/material";
import { alpha, useTheme } from "@mui/material/styles";
const COLOR_MAP = {
accent: "primary",
default: "default",
success: "success",
warning: "warning",
danger: "error",
info: "info",
};
const SIZE_MAP = {
sm: "small",
md: "medium",
};
/**
* App soft chip wrapper (`variant="soft"` from theme overrides).
*/
const SoftChip = ({ color = "default", size = "sm", clickable = false, active = false, sx, ...props }) => {
const theme = useTheme();
Iif (color === "onPrimary") {
return (
<Chip
{...props}
size={SIZE_MAP[size] || "small"}
variant="soft"
sx={{
bgcolor: alpha(theme.palette.common.white, active ? 0.36 : 0.22),
color: theme.palette.common.white,
fontWeight: active ? 700 : 600,
cursor: clickable ? "pointer" : "default",
...(active ? { boxShadow: `inset 0 0 0 1.5px ${alpha(theme.palette.common.white, 0.9)}` } : {}),
"& .MuiChip-icon": { color: "inherit !important" },
...sx,
}}
/>
);
}
const muiColor = COLOR_MAP[color] || "default";
const ringColor = muiColor === "default" ? theme.palette.text.primary : theme.palette[muiColor]?.main;
const activeSx =
active && ringColor
? { boxShadow: `inset 0 0 0 1.5px ${alpha(ringColor, 0.9)}`, fontWeight: 700 }
: {};
return (
<Chip
{...props}
size={SIZE_MAP[size] || "small"}
variant="soft"
color={muiColor}
sx={{
cursor: clickable ? "pointer" : "default",
...activeSx,
...sx,
}}
/>
);
};
export default SoftChip;
|