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 | 69x 399x 298x 69x 2x 2x | import { Box } from "@mui/material";
import { WarningIcon } from "@phosphor-icons/react";
import { useAppTheme, styled } from "@theme/v2/Provider";
interface DotProps {
size?: number | string;
bgColor?: string;
}
export const DotComponent = styled("div", {
shouldForwardProp: (prop) => prop !== "size" && prop !== "bgColor",
})<DotProps>(({ size = 2, bgColor, theme }) => ({
display: "inline-block",
width: size,
height: size,
minWidth: size,
minHeight: size,
borderRadius: "50%",
backgroundColor: bgColor || theme.palette?.text?.secondary,
flexShrink: 0,
flexGrow: 0,
lineHeight: 0,
}));
export const WarningInCircle = ({
size = 32,
color,
}: {
size?: number;
color?: string;
}) => {
const theme = useAppTheme();
return (
<Box
sx={{
width: size,
height: size,
borderRadius: "50%",
border: `1px solid ${color}`,
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: theme.palette.primitive?.warning[10],
svg: {
marginTop: "-2px",
},
}}
>
<WarningIcon size={20} color={color} weight="regular" />
</Box>
);
};
|