50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { COLORS } from "./logic"
|
|
|
|
interface NumberBallProps {
|
|
number: number
|
|
state: "idle" | "highlighted" | "used"
|
|
colorIndex?: number
|
|
size?: "normal" | "large" | "xlarge"
|
|
dimmed?: boolean
|
|
}
|
|
|
|
export function NumberBall({ number, state, colorIndex, size = "normal", dimmed = false }: NumberBallProps) {
|
|
const isHighlighted = state === "highlighted"
|
|
const hasColor = colorIndex !== undefined
|
|
|
|
const borderColor = hasColor
|
|
? COLORS[colorIndex]
|
|
: state === "idle" ? "#e2e6ea"
|
|
: "#eef0f2"
|
|
const bgColor = isHighlighted && hasColor
|
|
? COLORS[colorIndex]
|
|
: "transparent"
|
|
const textColor = isHighlighted && hasColor
|
|
? "#ffffff"
|
|
: hasColor ? COLORS[colorIndex]
|
|
: state === "idle" ? "#8a95a1"
|
|
: "#cdd2d8"
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex items-center justify-center font-mono select-none transition-all duration-150",
|
|
size === "normal" && "w-8 h-8 text-sm",
|
|
size === "large" && "w-14 h-14 text-lg",
|
|
size === "xlarge" && "w-16 h-16 text-xl",
|
|
dimmed && !isHighlighted && "opacity-30",
|
|
)}
|
|
style={{
|
|
border: `1px solid ${borderColor}`,
|
|
backgroundColor: bgColor,
|
|
color: textColor,
|
|
}}
|
|
>
|
|
{String(number).padStart(2, "0")}
|
|
</div>
|
|
)
|
|
}
|