51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T3015,"use client"; import { cn } from "@/lib/utils"; import { useEffect, useRef, useState, useCallback } from "react"; /* ─── Types ─────────────────────────────────────────────────── */ interface SplitFlapRow { /** Label text shown on the left side of the row */ label: string; /** Value text shown on the right side of the row */ value: string; } interface SplitFlapDisplayProps { /** Rows of label + value pairs to display on the board */ rows?: SplitFlapRow[]; /** Simple text mode – renders a single row of characters */ text?: string; /** Total number of character cells per row (pads shorter strings with spaces) */ columns?: number; /** Size variant controlling cell dimensions and typography */ size?: "sm" | "md" | "lg"; /** Accent color for the side indicator strips */ accentColor?: string; /** Whether to show the green indicator strips on each row */ showIndicators?: boolean; /** Stagger delay in ms between each character starting its flip (creates a wave) */ staggerDelay?: number; /** Speed in ms for each individual character flip step */ flipSpeed?: number; /** Additional CSS classes for the outer container */ className?: string; } /* ─── Character Set ─────────────────────────────────────────── */ const CHARACTERS = " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789$.,!?:;+-=%&#@"; function getNextChar(current: string): string { const idx = CHARACTERS.indexOf(current); if (idx === -1 || idx >= CHARACTERS.length - 1) return CHARACTERS[0] ?? " "; return CHARACTERS[idx + 1] ?? " "; } /* ─── Individual Flap Cell ──────────────────────────────────── */ function FlapCell({ targetChar, size = "md", delay = 0, flipSpeed = 35, }: { targetChar: string; size?: "sm" | "md" | "lg"; delay?: number; flipSpeed?: number; }) { const [displayChar, setDisplayChar] = useState(" "); const [isFlipping, setIsFlipping] = useState(false); const [flipPhase, setFlipPhase] = useState<"idle" | "top-down" | "bottom-up">("idle"); const prevCharRef = useRef(" "); const timeoutRef = useRef | null>(null); const intervalRef = useRef | null>(null); const cleanup = useCallback(() => { if (timeoutRef.current) clearTimeout(timeoutRef.current); if (intervalRef.current) clearInterval(intervalRef.current); }, []); useEffect(() => { cleanup(); const target = targetChar.toUpperCase(); if (displayChar === target) { setIsFlipping(false); setFlipPhase("idle"); return; } timeoutRef.current = setTimeout(() => { setIsFlipping(true); intervalRef.current = setInterval(() => { setDisplayChar((prev) => { const next = getNextChar(prev); // Trigger flip animation phases setFlipPhase("top-down"); setTimeout(() => setFlipPhase("bottom-up"), flipSpeed * 0.4); setTimeout(() => setFlipPhase("idle"), flipSpeed * 0.8); prevCharRef.current = prev; if (next === target) { if (intervalRef.current) clearInterval(intervalRef.current); setTimeout(() => { setIsFlipping(false); setFlipPhase("idle"); }, flipSpeed); } return next; }); }, flipSpeed); }, delay); return cleanup; // eslint-disable-next-line react-hooks/exhaustive-deps }, [targetChar]); const sizeMap = { sm: { cell: "w-[26px] h-[38px] text-[16px]", gap: "gap-[1px]" }, md: { cell: "w-[38px] h-[54px] text-[24px]", gap: "gap-[1px]" }, lg: { cell: "w-[52px] h-[72px] text-[34px]", gap: "gap-[2px]" }, }; const s = sizeMap[size]; return (

{/* ── Static top half ──────────────── */}

{displayChar}

{/* ── Static bottom half ───────────── */}

{displayChar}

{/* ── Flipping top panel ───────────── */} {isFlipping && flipPhase === "top-down" && (

{prevCharRef.current}

)} {/* ── Flipping bottom panel ────────── */} {isFlipping && flipPhase === "bottom-up" && (

{displayChar}

)} {/* ── Center divider line ──────────── */}

{/* ── Subtle inner shadow overlay ──── */}

); } /* ─── Indicator Strip (green side bar) ──────────────────────── */ function IndicatorStrip({ color = "#22c55e", size = "md", }: { color?: string; size?: "sm" | "md" | "lg"; }) { const heightMap = { sm: "h-[38px]", md: "h-[54px]", lg: "h-[72px]" }; return (

); } /* ─── Row Component ─────────────────────────────────────────── */ function FlapRow({ text, columns, size = "md", accentColor = "#22c55e", showIndicators = true, staggerDelay = 30, flipSpeed = 35, }: { text: string; columns: number; size?: "sm" | "md" | "lg"; accentColor?: string; showIndicators?: boolean; staggerDelay?: number; flipSpeed?: number; }) { const padded = text.toUpperCase().padEnd(columns, " ").substring(0, columns); return (

{showIndicators && }

{padded.split("").map((char, i) => ( ))}

{showIndicators && }

); } /* ─── Keyframes (injected once) ─────────────────────────────── */ const KEYFRAMES_ID = "split-flap-keyframes"; function useInjectKeyframes() { useEffect(() => { if (typeof document === "undefined") return; if (document.getElementById(KEYFRAMES_ID)) return; const style = document.createElement("style"); style.id = KEYFRAMES_ID; style.textContent = ` @keyframes flapTopDown { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(-90deg); } } @keyframes flapBottomUp { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0deg); } } `; document.head.appendChild(style); return () => { const el = document.getElementById(KEYFRAMES_ID); if (el) el.remove(); }; }, []); } /* ─── Main Export ────────────────────────────────────────────── */ export function SplitFlapDisplay({ rows, text, columns = 14, size = "md", accentColor = "#22c55e", showIndicators = true, staggerDelay = 30, flipSpeed = 35, className, }: SplitFlapDisplayProps) { useInjectKeyframes(); // Simple single-row text mode if (text && !rows) { return (

); } // Multi-row board mode return (

{(rows ?? []).map((row, idx) => { const combined = `${row.label}${" ".repeat(Math.max(1, columns - row.label.length - row.value.length))}${row.value}`; return ( ); })}

); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L51",null,{"files":[{"path":"components/ui/split-flap-display.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]