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

\n \n );\n\n if (href) {\n return (\n \n {CardContent}\n \n );\n }\n\n if (onButtonClick) {\n return (\n \n {CardContent}\n \n );\n }\n\n return CardContent;\n}\n\nfunction LightBulb({\n state,\n transitionDuration,\n}: {\n state: LightState;\n transitionDuration: number;\n}) {\n const transitionStyle = {\n transition: `opacity ${transitionDuration}ms ease-out, transform ${transitionDuration}ms ease-out`,\n };\n\n return (\n \n {/* Glow effect for medium state (::before equivalent) */}\n {state === \"medium\" && (\n \n )}\n\n {/* Glow effect for high state (::after equivalent) */}\n {state === \"high\" && (\n \n )}\n \n );\n}\n","path":"index.tsx","target":"components/smoothui/switchboard-card/index.tsx","type":"registry:ui"}],"name":"switchboard-card","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Switchboard Card","type":"registry:ui"}