65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import { COLORS } from "@/components/logic"
|
|
|
|
interface SingleModePanelProps {
|
|
singleBatches: { numbers: number[]; colorIndex: number; batchNumber: number }[]
|
|
}
|
|
|
|
export function SingleModePanel({ singleBatches }: SingleModePanelProps) {
|
|
if (singleBatches.length === 0) {
|
|
return null
|
|
}
|
|
|
|
// Reverse to show newest first
|
|
const reversedBatches = [...singleBatches].reverse()
|
|
|
|
return (
|
|
<div className="flex flex-col h-full overflow-hidden">
|
|
{/* Stats */}
|
|
<div className="flex items-center gap-4 px-5 py-2 border-b border-[#e2e6ea] flex-shrink-0">
|
|
<span className="text-[10px] tracking-[0.2em] uppercase text-[#8a95a1]">RECORDS</span>
|
|
<span className="flex-1 h-px bg-[#e2e6ea]" />
|
|
<span className="text-[10px] text-[#0f141a]">
|
|
{singleBatches.length} BATCHES
|
|
</span>
|
|
</div>
|
|
|
|
{/* Records grid - newest first, wrapping */}
|
|
<div className="flex-1 overflow-y-auto scrollbar-thin px-5 py-3">
|
|
<div className="flex flex-wrap gap-2">
|
|
{reversedBatches.map((batch, displayIdx) => {
|
|
const actualIdx = singleBatches.length - 1 - displayIdx
|
|
return (
|
|
<div
|
|
key={`batch-${batch.batchNumber}`}
|
|
className="flex items-center gap-2 px-3 py-2 border border-[#e2e6ea] fui-slide-up"
|
|
style={{ animationDelay: `${displayIdx * 20}ms` }}
|
|
>
|
|
{/* Color indicator */}
|
|
<div
|
|
className="w-2 h-2 rounded-full flex-shrink-0"
|
|
style={{ backgroundColor: COLORS[batch.colorIndex] }}
|
|
/>
|
|
{/* Numbers - sorted */}
|
|
<span
|
|
className="text-sm font-mono"
|
|
style={{
|
|
color: COLORS[batch.colorIndex],
|
|
}}
|
|
>
|
|
{[...batch.numbers].sort((a, b) => a - b).map(n => String(n).padStart(2, "0")).join(" ")}
|
|
</span>
|
|
{/* Batch index */}
|
|
<span className="text-[9px] text-[#8a95a1] font-mono ml-1">
|
|
#{String(batch.batchNumber).padStart(3, "0")}
|
|
</span>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|