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 | import { Badge, Stack } from "@mui/material";
import { styled } from "@mui/material";
import { palette } from "@palette";
export const CustomBadge = styled(Badge)(() => ({
"& .MuiBadge-badge": {
color: "#FFF",
backgroundColor: palette.neutral.black,
fontWeight: "500",
fontSize: "18px",
lineHeight: "22px",
left: "7px",
top: "4px",
},
width: "100%",
}));
type CardContainerProps = {
disabled?: boolean;
selected?: boolean;
hasCategory?: boolean;
};
export const CardContainer = styled(Stack, {
shouldForwardProp: (prop) => prop !== "selected" && prop !== "hasCategory"
})<CardContainerProps>(
({ theme, disabled, selected, hasCategory }) => ({
background: "transparent",
alignItems: "start",
borderRadius: "12px",
position: "relative",
padding: "16px",
width: "100%",
border:
selected && !hasCategory
? `1px solid ${palette.neutral.black}`
: "1px solid #D1D1D0",
":hover": {
cursor: selected ? "default" : "pointer",
background: palette.neutral.white,
},
...(selected && {
backgroundColor: palette.neutral.white,
}),
...(!disabled && {
"&:hover": {
boxShadow:
"0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)",
},
}),
[theme.breakpoints.down("sm")]: {
flexDirection: "column",
},
}),
);
export const SecondaryActionContainer = styled(Stack)(() => ({
flexDirection: "row",
alignItems: "center",
gap: "8px",
animation: "inAnimation 250ms ease-in",
"@keyframes inAnimation": {
"0%": {
opacity: 0,
visibility: "hidden",
},
"100%": {
opacity: 1,
visibility: "visible",
},
},
})) |