73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import { COLORS } from "./logic"
|
|
|
|
interface ResultPanelProps {
|
|
groups: { numbers: number[]; colorIndex: number }[]
|
|
hasResult: boolean
|
|
placeholder?: string
|
|
}
|
|
|
|
export function ResultPanel({ groups, hasResult, placeholder }: ResultPanelProps) {
|
|
if (!hasResult || groups.length === 0) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center h-full min-h-40 gap-3">
|
|
<div className="text-[10px] tracking-[0.2em] text-[#cdd2d8] font-mono uppercase">
|
|
— AWAITING INPUT —
|
|
</div>
|
|
{placeholder && (
|
|
<div className="text-xs text-[#8a95a1] font-mono">{placeholder}</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col">
|
|
{groups.map((group, idx) => {
|
|
const sorted = [...group.numbers].sort((a, b) => a - b)
|
|
const color = COLORS[group.colorIndex]
|
|
return (
|
|
<div
|
|
key={idx}
|
|
className="flex items-start gap-4 py-2.5 border-b border-[#e2e6ea] last:border-b-0 fui-slide-up"
|
|
style={{ animationDelay: `${idx * 40}ms` }}
|
|
>
|
|
{/* Group label with color */}
|
|
<div className="flex flex-col gap-0.5 w-14 flex-shrink-0 pt-0.5">
|
|
<div className="flex items-center gap-2">
|
|
<div
|
|
className="w-2 h-2 rounded-full"
|
|
style={{ backgroundColor: color }}
|
|
/>
|
|
<span className="text-xs font-mono uppercase tracking-[0.15em]" style={{ color }}>
|
|
G{String(idx + 1).padStart(2, "0")}
|
|
</span>
|
|
</div>
|
|
<span className="text-[10px] font-mono text-[#8a95a1]">
|
|
{String(group.numbers.length).padStart(2, "0")} P
|
|
</span>
|
|
</div>
|
|
{/* Numbers with color */}
|
|
<div className="flex flex-wrap gap-1.5 flex-1 min-w-0">
|
|
{sorted.map((num) => (
|
|
<span
|
|
key={num}
|
|
className="min-w-8 h-8 px-1.5 flex items-center justify-center text-sm font-mono border fui-fadein"
|
|
style={{
|
|
borderColor: color + "40",
|
|
backgroundColor: color + "15",
|
|
color: color,
|
|
}}
|
|
>
|
|
{String(num).padStart(2, "0")}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|