52:I[707087,["/_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"],"RegistryDependencies"] 53: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"] 54:T28f6,"use client"; import { cn } from "@/lib/utils"; import { useEffect, useMemo, useState } from "react"; export type LightState = "off" | "medium" | "high"; export interface SwitchboardCardProps { className?: string; columns?: number; gridPattern?: number[] | number[][]; // Direct grid pattern: flat array (columns*rows) or 2D array [rows][columns] where 0=off, 1=high href?: string; onButtonClick?: () => void; randomLights?: boolean; // If true, randomly activate some lights rows?: number; showButton?: boolean; subtitle: string; title: string; transitionDuration?: number; // in milliseconds (default: 200ms for smooth light transitions) variant?: "default" | "next"; } function generateRandomPattern( totalLights: number, activeRatio = 0.15 ): number[] { const activeCount = Math.floor(totalLights * activeRatio); const pattern: number[] = []; const used = new Set(); while (pattern.length < activeCount) { const index = Math.floor(Math.random() * totalLights); if (!used.has(index)) { used.add(index); pattern.push(index); } } return pattern.sort((a, b) => a - b); } function parse2DGridPattern( grid2D: number[][], rows: number, columns: number, totalLights: number ): number[] { const pattern: number[] = []; for (let row = 0; row < Math.min(grid2D.length, rows); row++) { const rowData = grid2D[row]; if (Array.isArray(rowData)) { for (let col = 0; col < Math.min(rowData.length, columns); col++) { if (rowData[col] === 1) { const index = col + row * columns; if (index >= 0 && index < totalLights) { pattern.push(index); } } } } } return pattern; } function parseFlatGridPattern( flatPattern: number[], totalLights: number ): number[] { const pattern: number[] = []; for (let i = 0; i < Math.min(flatPattern.length, totalLights); i++) { if (flatPattern[i] === 1) { pattern.push(i); } } return pattern; } export default function SwitchboardCard({ title, subtitle, columns = 18, rows = 5, gridPattern, randomLights = false, transitionDuration = 200, className, variant = "default", showButton: _showButton = true, href, onButtonClick, }: SwitchboardCardProps) { const totalLights = columns * rows; const isRandomLightsMode = randomLights && !gridPattern; // Convert gridPattern to light indices // Priority: gridPattern > randomLights const basePattern = useMemo(() => { if (gridPattern) { // Handle 2D array [rows][columns] const is2DArray = Array.isArray(gridPattern[0]) && typeof gridPattern[0] !== "number"; if (is2DArray) { return parse2DGridPattern( gridPattern as number[][], rows, columns, totalLights ); } // Handle flat array [columns*rows] return parseFlatGridPattern(gridPattern as number[], totalLights); } if (randomLights) { return generateRandomPattern(totalLights); } return []; }, [gridPattern, randomLights, columns, rows, totalLights]); // Animated light states // For random lights: all start off, will animate randomly through medium → high → medium → off // For word/pattern: pattern lights start high (stay high), rest off const [lightStates, setLightStates] = useState(() => { const states: LightState[] = new Array(totalLights).fill("off"); if (!isRandomLightsMode) { // For word/pattern, set pattern lights to high for (const index of basePattern) { if (index >= 0 && index < totalLights) { states[index] = "high"; } } } // For random lights, all start off (will animate) return states; }); // Animate lights - only for random lights mode (word/pattern stays high) useEffect(() => { // Word/pattern mode: no animation, lights stay high if (!isRandomLightsMode) { return; } const interval = setInterval(() => { setLightStates((prev) => { const next = [...prev]; // For random lights: animate all lights randomly through off → high (via medium transition) // Randomly select a subset of lights to animate each tick const lightsToAnimate = Math.floor(totalLights * 0.2); // Animate ~20% of all lights per tick const allIndices = Array.from({ length: totalLights }, (_, i) => i); const shuffled = allIndices.sort(() => Math.random() - 0.5); for (let i = 0; i < Math.min(lightsToAnimate, shuffled.length); i++) { const index = shuffled[i]; if (index >= 0 && index < totalLights) { const current = prev[index]; // State transition logic for random lights: off → high (with medium as intermediate transition state) // Medium state is only used as a transition, not a final state if (current === "off") { // Start transition to high by going to medium first next[index] = "medium"; } else if (current === "medium") { // Continue transition: medium → high next[index] = "high"; } else if (current === "high") { // Turn off directly (no medium transition when turning off) next[index] = "off"; } } } return next; }); }, 200); // 0.2s interval to match transition duration return () => clearInterval(interval); }, [isRandomLightsMode, totalLights]); const isNextVariant = variant === "next"; const CardContent = (

{/* Illustration/Switchboard */}

{lightStates.map((state, index) => ( ))}

{/* Title */}

{title}

{/* Subtitle */}

{subtitle}

); if (href) { return ( {CardContent} ); } if (onButtonClick) { return ( ); } return CardContent; } function LightBulb({ state, transitionDuration, }: { state: LightState; transitionDuration: number; }) { const transitionStyle = { transition: `opacity ${transitionDuration}ms ease-out, transform ${transitionDuration}ms ease-out`, }; return (

{/* Glow effect for medium state (::before equivalent) */} {state === "medium" && (

)} {/* Glow effect for high state (::after equivalent) */} {state === "high" && (

)}

); } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L52",null,{"namespace":"@smoothui","registryDependencies":["https://smoothui.dev/r/tokens.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"index.tsx","content":"$54","type":"registry:ui","target":"components/smoothui/switchboard-card/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]