2023-11-05 23:33:40 +00:00
|
|
|
import { Box, SxProps, Theme } from "@mui/material"
|
|
|
|
|
import { ReactElement } from "react"
|
2023-06-16 20:09:56 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
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) {
|
2023-11-05 23:33:40 +00:00
|
|
|
number = number % 100
|
2023-07-05 05:47:46 +00:00
|
|
|
|
2023-11-05 23:33:40 +00:00
|
|
|
const firstDigit = Math.floor(number / 10)
|
|
|
|
|
const secondDigit = number % 10
|
2023-07-05 05:47:46 +00:00
|
|
|
|
2023-11-05 23:33:40 +00:00
|
|
|
const firstDigitTranslateX = 6
|
|
|
|
|
const secondDigitTranslateX = number < 10
|
|
|
|
|
? 9
|
|
|
|
|
: number < 20
|
|
|
|
|
? 11
|
|
|
|
|
: 12
|
2023-07-05 05:47:46 +00:00
|
|
|
|
2023-11-05 23:33:40 +00:00
|
|
|
const firstDigitElement = digitSvgs[firstDigit](firstDigitTranslateX)
|
|
|
|
|
const secondDigitElement = digitSvgs[secondDigit](secondDigitTranslateX)
|
2023-06-16 20:09:56 +00:00
|
|
|
|
2023-11-05 23:33:40 +00:00
|
|
|
return (
|
|
|
|
|
<Box sx={{
|
|
|
|
|
backgroundColor,
|
|
|
|
|
color,
|
|
|
|
|
width: "36px",
|
|
|
|
|
height: "36px",
|
|
|
|
|
borderRadius: "6px",
|
|
|
|
|
display: "flex",
|
|
|
|
|
alignItems: "center",
|
|
|
|
|
justifyContent: "center",
|
|
|
|
|
flexShrink: 0,
|
|
|
|
|
...sx,
|
|
|
|
|
}}>
|
|
|
|
|
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
{circleSvg}
|
|
|
|
|
{number > 9 && firstDigitElement}
|
|
|
|
|
{secondDigitElement}
|
|
|
|
|
</svg>
|
|
|
|
|
</Box>
|
|
|
|
|
)
|
2023-07-05 05:47:46 +00:00
|
|
|
}
|
|
|
|
|
|
2023-11-05 23:33:40 +00:00
|
|
|
const circleSvg = <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" />
|
2023-07-05 05:47:46 +00:00
|
|
|
|
2023-07-07 13:49:14 +00:00
|
|
|
const digitSvgs: Record<number, (translateX: number) => ReactElement> = {
|
2023-11-05 23:33:40 +00:00
|
|
|
0: (translateX: number) => (
|
|
|
|
|
<path transform={`translate(${translateX} 7)`} d="M3 8.75C4.24264 8.75 5.25 7.07107 5.25 5C5.25 2.92893 4.24264 1.25 3 1.25C1.75736 1.25 0.75 2.92893 0.75 5C0.75 7.07107 1.75736 8.75 3 8.75Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
),
|
|
|
|
|
1: (translateX: number) => (
|
|
|
|
|
<path transform={`translate(${translateX} 7)`} d="M1.125 2.75L3.375 1.25V8.75015" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
),
|
|
|
|
|
2: (translateX: number) => (
|
|
|
|
|
<path transform={`translate(${translateX} 7)`} d="M1.27158 2.39455C1.44019 1.99638 1.74115 1.66868 2.12357 1.46688C2.50598 1.26507 2.94636 1.20155 3.37021 1.28705C3.79407 1.37256 4.17538 1.60185 4.44964 1.93613C4.7239 2.27041 4.87428 2.68916 4.87534 3.12156C4.87703 3.49512 4.76526 3.8604 4.55483 4.16907V4.16907L1.12305 8.75H4.87534" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
),
|
|
|
|
|
3: (translateX: number) => (
|
|
|
|
|
<path transform={`translate(${translateX} 7)`} d="M1.125 1.25H4.875L2.6875 4.375C3.04723 4.37503 3.40139 4.46376 3.71863 4.63336C4.03587 4.80295 4.30639 5.04816 4.50623 5.34727C4.70607 5.64637 4.82906 5.99015 4.86431 6.34814C4.89956 6.70614 4.84598 7.0673 4.70832 7.39964C4.57066 7.73198 4.35316 8.02525 4.07509 8.25345C3.79702 8.48166 3.46696 8.63777 3.11415 8.70796C2.76133 8.77815 2.39666 8.76024 2.05242 8.65583C1.70818 8.55142 1.395 8.36373 1.14062 8.10938" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
),
|
|
|
|
|
4: (translateX: number) => (
|
|
|
|
|
<>
|
|
|
|
|
<path transform={`translate(${translateX} 7)`} d="M2.62508 1.07788L0.75 6.3906H4.50015" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
<path transform={`translate(${translateX} 7)`} d="M4.5 3.89038V8.89058" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
</>
|
|
|
|
|
),
|
|
|
|
|
5: (translateX: number) => (
|
|
|
|
|
<path transform={`translate(${translateX} 7)`} d="M5.0625 1.25H1.92188L1.3125 5.01562C1.61844 4.70972 2.00821 4.5014 2.43254 4.41702C2.85687 4.33263 3.29669 4.37596 3.69639 4.54153C4.09609 4.70711 4.43772 4.98749 4.67807 5.34721C4.91843 5.70694 5.04672 6.12986 5.04672 6.5625C5.04672 6.99514 4.91843 7.41806 4.67807 7.77779C4.43772 8.13751 4.09609 8.41789 3.69639 8.58346C3.29669 8.74904 2.85687 8.79237 2.43254 8.70798C2.00821 8.6236 1.61844 8.41528 1.3125 8.10937" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
),
|
|
|
|
|
6: (translateX: number) => (
|
|
|
|
|
<>
|
|
|
|
|
<path transform={`translate(${translateX - 1} 7)`} d="M2.00977 5.30469L4.65117 0.875" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
<path transform={`translate(${translateX - 1} 7)`} d="M3.99609 8.75C5.26462 8.75 6.29297 7.72165 6.29297 6.45312C6.29297 5.1846 5.26462 4.15625 3.99609 4.15625C2.72756 4.15625 1.69922 5.1846 1.69922 6.45312C1.69922 7.72165 2.72756 8.75 3.99609 8.75Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
</>
|
|
|
|
|
),
|
|
|
|
|
7: (translateX: number) => (
|
|
|
|
|
<path transform={`translate(${translateX} 7)`} d="M1.125 1.25H4.875L2.375 8.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
),
|
|
|
|
|
8: (translateX: number) => (
|
|
|
|
|
<>
|
|
|
|
|
<path transform={`translate(${translateX} 7)`} d="M4.72779 2.97356C4.72547 3.36962 4.58601 3.75265 4.33315 4.05749C4.08029 4.36233 3.72963 4.57017 3.34082 4.64564C2.95201 4.72111 2.54906 4.65956 2.20051 4.47146C1.85196 4.28336 1.57934 3.98032 1.42901 3.6139C1.27868 3.24747 1.25993 2.84028 1.37595 2.46158C1.49196 2.08289 1.73559 1.75608 2.06537 1.53675C2.39516 1.31741 2.79075 1.21909 3.18485 1.25851C3.57895 1.29793 3.94722 1.47266 4.22703 1.75298C4.54727 2.07862 4.72705 2.51684 4.72779 2.97356Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
<path transform={`translate(${translateX} 7)`} d="M5.04125 6.72925C5.03995 7.19778 4.87634 7.65138 4.57827 8.01287C4.28019 8.37436 3.86607 8.62139 3.40637 8.71193C2.94667 8.80247 2.4698 8.73092 2.05691 8.50946C1.64403 8.288 1.32063 7.93031 1.14177 7.49727C0.962899 7.06422 0.939612 6.58258 1.07587 6.1343C1.21213 5.68602 1.49951 5.2988 1.8891 5.03854C2.2787 4.77829 2.74645 4.66107 3.21273 4.70684C3.67902 4.75261 4.11505 4.95854 4.44661 5.28958C4.63578 5.47847 4.78572 5.70292 4.88777 5.95C4.98983 6.19709 5.04199 6.46192 5.04125 6.72925Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
</>
|
|
|
|
|
),
|
|
|
|
|
9: (translateX: number) => (
|
|
|
|
|
<>
|
|
|
|
|
<path transform={`translate(${translateX} 7)`} d="M5.03203 4.47046L2.39062 8.90015" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
<path transform={`translate(${translateX} 7)`} d="M3.04688 5.6189C4.3154 5.6189 5.34375 4.59055 5.34375 3.32202C5.34375 2.05349 4.3154 1.02515 3.04688 1.02515C1.77835 1.02515 0.75 2.05349 0.75 3.32202C0.75 4.59055 1.77835 5.6189 3.04688 5.6189Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
</>
|
|
|
|
|
),
|
|
|
|
|
}
|
