import { Box, SxProps, Theme } from "@mui/material"; import { ReactElement } from "react"; interface Props { number: number; color: string; backgroundColor?: string; sx?: SxProps; } export default function NumberIcon({ number, backgroundColor = "rgb(0 0 0 / 0)", color, sx }: Props) { number = number % 100; const firstDigit = Math.floor(number / 10); const secondDigit = number % 10; const firstDigitTransformX = 6; const secondDigitTransformX = number < 10 ? 9 : number < 20 ? 11 : 12; const firstDigitElement = digitSvgs[firstDigit](firstDigitTransformX); const secondDigitElement = digitSvgs[secondDigit](secondDigitTransformX); return ( ); } const circleSvg = ; const digitSvgs: Record ReactElement> = { 0: (transformX: number) => ( ), 1: (transformX: number) => ( ), 2: (transformX: number) => ( ), 3: (transformX: number) => ( ), 4: (transformX: number) => ( <> ), 5: (transformX: number) => ( ), 6: (transformX: number) => ( <> ), 7: (transformX: number) => ( ), 8: (transformX: number) => ( <> ), 9: (transformX: number) => ( <> ), };