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 firstDigitTranslateX = 6 const secondDigitTranslateX = number < 10 ? 9 : number < 20 ? 11 : 12 const firstDigitElement = digitSvgs[firstDigit](firstDigitTranslateX) const secondDigitElement = digitSvgs[secondDigit](secondDigitTranslateX) return ( ) } const circleSvg = const digitSvgs: Record ReactElement> = { 0: (translateX: number) => ( ), 1: (translateX: number) => ( ), 2: (translateX: number) => ( ), 3: (translateX: number) => ( ), 4: (translateX: number) => ( <> ), 5: (translateX: number) => ( ), 6: (translateX: number) => ( <> ), 7: (translateX: number) => ( ), 8: (translateX: number) => ( <> ), 9: (translateX: number) => ( <> ), }