{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "split-flap-demo",
  "type": "registry:example",
  "title": "Split Flap Demo",
  "description": "A departure board cycling through four destinations.",
  "registryDependencies": [
    "@loomui/split-flap"
  ],
  "files": [
    {
      "path": "registry/example/split-flap-demo.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SplitFlap } from \"@/registry/loomui/split-flap\"\n\nconst BOARD = [\n  { city: \"LISBON\", gate: \"B12\", time: \"10:42\" },\n  { city: \"OSAKA\", gate: \"D04\", time: \"13:05\" },\n  { city: \"REYKJAVIK\", gate: \"A21\", time: \"16:30\" },\n  { city: \"MONTREAL\", gate: \"C09\", time: \"19:55\" },\n]\n\nexport default function SplitFlapDemo() {\n  const [index, setIndex] = React.useState(0)\n\n  React.useEffect(() => {\n    const timer = window.setInterval(\n      () => setIndex((current) => (current + 1) % BOARD.length),\n      3600\n    )\n    return () => window.clearInterval(timer)\n  }, [])\n\n  const row = BOARD[index]\n\n  return (\n    <div className=\"bg-muted/40 flex flex-col items-center gap-3 rounded-xl border p-6\">\n      <SplitFlap value={row.city} padTo={9} className=\"text-[1.6rem]\" />\n      <div className=\"flex gap-3\">\n        <SplitFlap value={row.gate} padTo={3} className=\"text-base\" />\n        <SplitFlap value={row.time} padTo={5} className=\"text-base\" />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}