93 lines
7.0 KiB
TypeScript
93 lines
7.0 KiB
TypeScript
|
import { Box, SxProps, Theme } from "@mui/material";
|
||
|
|
import { ReactElement } from "react";
|
||
|
|
|
||
|
|
|
||
|
|
const numberSvgs: Record<number, ReactElement> = {
|
||
|
|
0: (
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="M12.002 16.5044C13.6588 16.5044 15.002 14.4897 15.002 12.0044C15.002 9.51911 13.6588 7.50439 12.002 7.50439C10.3451 7.50439 9.00195 9.51911 9.00195 12.0044C9.00195 14.4897 10.3451 16.5044 12.002 16.5044Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
|
|
<path d="M12.002 21.0044C16.9725 21.0044 21.002 16.975 21.002 12.0044C21.002 7.03383 16.9725 3.00439 12.002 3.00439C7.03139 3.00439 3.00195 7.03383 3.00195 12.0044C3.00195 16.975 7.03139 21.0044 12.002 21.0044Z" stroke="currentColor" strokeWidth="1.5" strokeMiterlimit="10" />
|
||
|
|
</svg>
|
||
|
|
),
|
||
|
|
1: (
|
||
|
|
<svg width="24" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="M12.2578 21C17.2284 21 21.2578 16.9706 21.2578 12C21.2578 7.02944 17.2284 3 12.2578 3C7.28725 3 3.25781 7.02944 3.25781 12C3.25781 16.9706 7.28725 21 12.2578 21Z" stroke="currentColor" strokeWidth="1.5" strokeMiterlimit="10" />
|
||
|
|
<path d="M10.3828 9.375L12.6328 7.875V16.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
|
|
</svg>
|
||
|
|
),
|
||
|
|
2: (
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" strokeWidth="1.5" strokeMiterlimit="10" />
|
||
|
|
<path d="M9.92813 8.87848C10.1303 8.40097 10.4913 8.00797 10.9499 7.76595C11.4085 7.52393 11.9366 7.44775 12.4449 7.5503C12.9533 7.65284 13.4106 7.92782 13.7395 8.32871C14.0684 8.7296 14.2487 9.2318 14.25 9.75035C14.252 10.1984 14.118 10.6364 13.8656 11.0066V11.0066L9.75 16.5004H14.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
|
|
</svg>
|
||
|
|
),
|
||
|
|
3: (
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" strokeWidth="1.5" strokeMiterlimit="10" />
|
||
|
|
<path d="M9.75 7.875H14.25L11.625 11.625C12.0567 11.625 12.4817 11.7315 12.8624 11.935C13.243 12.1385 13.5677 12.4328 13.8075 12.7917C14.0473 13.1506 14.1949 13.5632 14.2372 13.9928C14.2795 14.4224 14.2152 14.8558 14.05 15.2546C13.8848 15.6534 13.6238 16.0053 13.2901 16.2791C12.9564 16.553 12.5603 16.7403 12.137 16.8246C11.7136 16.9088 11.276 16.8873 10.8629 16.762C10.4498 16.6367 10.074 16.4115 9.76875 16.1062" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
|
|
</svg>
|
||
|
|
),
|
||
|
|
4: (
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" strokeWidth="1.5" strokeMiterlimit="10" />
|
||
|
|
<path d="M11.625 7.125L9.375 13.5H13.875" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
|
|
<path d="M13.875 10.5V16.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
|
|
</svg>
|
||
|
|
),
|
||
|
|
5: (
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" strokeWidth="1.5" strokeMiterlimit="10" />
|
||
|
|
<path d="M14.25 7.875H10.4813L9.75 12.3938C10.1171 12.0267 10.5849 11.7767 11.094 11.6754C11.6032 11.5742 12.131 11.6262 12.6107 11.8248C13.0903 12.0235 13.5003 12.36 13.7887 12.7917C14.0771 13.2233 14.2311 13.7308 14.2311 14.25C14.2311 14.7692 14.0771 15.2767 13.7887 15.7083C13.5003 16.14 13.0903 16.4765 12.6107 16.6752C12.131 16.8738 11.6032 16.9258 11.094 16.8246C10.5849 16.7233 10.1171 16.4733 9.75 16.1063" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
|
|
</svg>
|
||
|
|
),
|
||
|
|
6: (
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="M12.002 21.0044C16.9725 21.0044 21.002 16.975 21.002 12.0044C21.002 7.03383 16.9725 3.00439 12.002 3.00439C7.03139 3.00439 3.00195 7.03383 3.00195 12.0044C3.00195 16.975 7.03139 21.0044 12.002 21.0044Z" stroke="currentColor" strokeWidth="1.5" strokeMiterlimit="10" />
|
||
|
|
<path d="M9.7334 12.1919L12.7521 7.12939" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
|
|
<path d="M12.002 16.1294C13.4517 16.1294 14.627 14.9541 14.627 13.5044C14.627 12.0546 13.4517 10.8794 12.002 10.8794C10.5522 10.8794 9.37695 12.0546 9.37695 13.5044C9.37695 14.9541 10.5522 16.1294 12.002 16.1294Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
|
|
</svg>
|
||
|
|
),
|
||
|
|
7: (
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
</svg>
|
||
|
|
),
|
||
|
|
8: (
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
</svg>
|
||
|
|
),
|
||
|
|
9: (
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="M12.002 21.0044C16.9725 21.0044 21.002 16.975 21.002 12.0044C21.002 7.03383 16.9725 3.00439 12.002 3.00439C7.03139 3.00439 3.00195 7.03383 3.00195 12.0044C3.00195 16.975 7.03139 21.0044 12.002 21.0044Z" stroke="currentColor" strokeWidth="1.5" strokeMiterlimit="10" />
|
||
|
|
<path d="M14.2707 11.8169L11.252 16.8794" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
|
|
<path d="M12.002 13.1294C13.4517 13.1294 14.627 11.9541 14.627 10.5044C14.627 9.05465 13.4517 7.87939 12.002 7.87939C10.5522 7.87939 9.37695 9.05465 9.37695 10.5044C9.37695 11.9541 10.5522 13.1294 12.002 13.1294Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
|
|
</svg>
|
||
|
|
),
|
||
|
|
};
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
number: number;
|
||
|
|
color: string;
|
||
|
|
backgroundColor?: string;
|
||
|
|
sx?: SxProps<Theme>;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function NumberIcon({ number, backgroundColor = "rgb(0 0 0 / 0)", color, sx }: Props) {
|
||
|
|
const numberElement = numberSvgs[number] ?? numberSvgs[0];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box sx={{
|
||
|
|
backgroundColor,
|
||
|
|
color,
|
||
|
|
width: "36px",
|
||
|
|
height: "36px",
|
||
|
|
borderRadius: "6px",
|
||
|
|
display: "flex",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "center",
|
||
|
|
flexShrink: 0,
|
||
|
|
...sx,
|
||
|
|
}}>
|
||
|
|
{numberElement}
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|