{"name":"train-departure-board","title":"Train Departure Board","type":"registry:ui","files":[{"path":"src/components/ui/train-departure-board.tsx","type":"registry:ui","target":"@ui/train-departure-board.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"./lib/utils\";\n\nexport interface DepartureRow {\n  time: string;\n  destination: string;\n  gate: string;\n  status: \"ON TIME\" | \"BOARDING\" | \"DELAYED\" | \"CANCELLED\";\n}\n\nexport interface TrainDepartureBoardProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  rows?: DepartureRow[];\n}\n\nconst STATUS_TONE: Record<DepartureRow[\"status\"], string> = {\n  \"ON TIME\": \"text-foreground\",\n  BOARDING: \"text-accent\",\n  DELAYED: \"text-accent\",\n  CANCELLED: \"text-destructive\",\n};\n\nexport function TrainDepartureBoard({\n  title = \"DEPARTURES\",\n  rows = [\n    { time: \"18:40\", destination: \"Night Express\", gate: \"G3\", status: \"BOARDING\" },\n    { time: \"19:05\", destination: \"Coastal Line\", gate: \"G1\", status: \"ON TIME\" },\n    { time: \"19:30\", destination: \"Metro Loop\", gate: \"G2\", status: \"DELAYED\" },\n  ],\n  className,\n  ...props\n}: TrainDepartureBoardProps) {\n  const [tick, setTick] = React.useState(0);\n\n  React.useEffect(() => {\n    const id = setInterval(() => setTick((t) => t + 1), 5000);\n    return () => clearInterval(id);\n  }, []);\n\n  return (\n    <div className={cn(\"w-full overflow-hidden rounded-lg border-2 border-foreground bg-card\", className)} {...props}>\n      <div className=\"flex items-center justify-between border-b-2 border-foreground bg-secondary px-4 py-2\">\n        <span className=\"font-mono text-xs font-bold uppercase tracking-[0.2em]\">{title}</span>\n        <span className=\"flex items-center gap-1.5 font-mono text-[10px] text-muted-foreground\" aria-live=\"polite\">\n          <span key={tick} className=\"size-1.5 animate-pulse rounded-full bg-accent\" aria-hidden />\n          LIVE\n        </span>\n      </div>\n      <div role=\"table\" aria-label={title}>\n        {rows.map((row) => (\n          <div\n            key={`${row.time}-${row.destination}`}\n            role=\"row\"\n            className=\"grid grid-cols-[64px_1fr_auto_auto] items-center gap-3 border-b border-dashed border-border px-4 py-2.5 font-mono text-sm last:border-0\"\n          >\n            <span className=\"font-bold tabular-nums\" role=\"cell\">{row.time}</span>\n            <span className=\"truncate uppercase\" role=\"cell\">{row.destination}</span>\n            <span className=\"text-muted-foreground\" role=\"cell\">{row.gate}</span>\n            <span role=\"cell\" className={cn(\"text-[11px] font-bold\", STATUS_TONE[row.status])}>\n              {row.status}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"}],"registryDependencies":["https://ui.bigbullapp.com/r/utils.json"]}