[perf] Refactor component

2026-06-16 19:14:39 +08:00
parent b86716e952
commit 89acd1f261
8 changed files with 137 additions and 165 deletions
@@ -0,0 +1,34 @@
+"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>
+  )
+}