34 lines
796 B
TypeScript
34 lines
796 B
TypeScript
"use client"
|
|
|
|
import { NumberBall } from "./number-ball"
|
|
|
|
interface MatrixProps {
|
|
total: number
|
|
getBallState: (n: number) => "idle" | "highlighted" | "used"
|
|
getBallColorIndex: (n: number) => number | undefined
|
|
getBallDimmed: (n: number) => boolean
|
|
size?: "normal" | "large" | "xlarge"
|
|
}
|
|
|
|
export function Matrix({
|
|
total,
|
|
getBallState,
|
|
getBallColorIndex,
|
|
getBallDimmed,
|
|
size = "normal"
|
|
}: MatrixProps) {
|
|
return (
|
|
<div className="flex flex-wrap gap-2 justify-center">
|
|
{Array.from({ length: total }, (_, i) => i + 1).map((n) => (
|
|
<NumberBall
|
|
key={n}
|
|
number={n}
|
|
state={getBallState(n)}
|
|
colorIndex={getBallColorIndex(n)}
|
|
dimmed={getBallDimmed(n)}
|
|
size={size}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
} |