{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "lightboard-demo",
  "type": "registry:component",
  "registryDependencies": [
    "lightboard"
  ],
  "files": [
    {
      "path": "registry/default/example/lightboard-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { LightBoard, PatternCell } from \"../ui/lightboard\"\n\nexport default function LightBoardDemo() {\n  const [controlledDrawState, setControlledDrawState] =\n    useState<PatternCell>(\"2\")\n  const [controlledHoverState, setControlledHoverState] = useState(false)\n\n  const cycleDrawState = () => {\n    setControlledDrawState((prev) => {\n      switch (prev) {\n        case \"0\":\n          return \"1\"\n        case \"1\":\n          return \"2\"\n        case \"2\":\n          return \"3\"\n        case \"3\":\n          return \"0\"\n        default:\n          return \"0\"\n      }\n    })\n  }\n\n  return (\n    <div className=\"space-y-2 p-2 lg:space-y-4 lg:p-8\">\n      <h1 className=\"text-3xl font-bold text-white\">LightBoard Demo</h1>\n\n      {/* Controlled Interactive Board */}\n      <div className=\"w-full max-w-2xl\">\n        <h2 className=\"mb-3 text-xl font-semibold\">\n          Controlled LightBoard with draw support\n        </h2>\n        <p className=\"mb-3\">\n          Try drawing on this board by clicking and dragging.\n        </p>\n\n        <div className=\"mb-3 flex space-x-4\">\n          <button\n            className=\"rounded bg-blue-500 px-4 py-2 text-sm font-bold text-white hover:bg-blue-700\"\n            onClick={cycleDrawState}\n          >\n            Draw Color: {controlledDrawState}\n          </button>\n          <button\n            className=\"rounded bg-green-500 px-4 py-2 text-sm font-bold text-white hover:bg-green-700\"\n            onClick={() => setControlledHoverState((prev) => !prev)}\n          >\n            Toggle Scroll: {controlledHoverState ? \"On\" : \"Off\"}\n          </button>\n        </div>\n\n        <div className=\"dark:bg-background bg-neutral-900\">\n          <LightBoard\n            rows={12}\n            lightSize={6}\n            gap={2}\n            text=\"CONTROLLED BOARD\"\n            font=\"default\"\n            disableDrawing={false}\n            updateInterval={150}\n            colors={{\n              background: \"#0a0a0a\",\n              textDim: \"#555555\",\n              drawLine: \"#E78AEA\",\n              textBright: \"#FFFFFF\",\n            }}\n            controlledDrawState={controlledDrawState}\n            onDrawStateChange={setControlledDrawState}\n            controlledHoverState={controlledHoverState}\n            onHoverStateChange={setControlledHoverState}\n          />\n        </div>\n      </div>\n\n      <h2 className=\"mb-3 text-xl font-semibold\">Drawing disabled</h2>\n\n      {/* Basic example */}\n      <div className=\"w-full max-w-md bg-black\">\n        <LightBoard\n          text=\"Hello World\"\n          rows={7}\n          gap={1}\n          lightSize={4}\n          font=\"default\"\n          updateInterval={150}\n          colors={{\n            background: \"#1a1a1a\",\n            textDim: \"#3a3a3a\",\n            drawLine: \"#7a7a7a\",\n            textBright: \"#ffffff\",\n          }}\n        />\n      </div>\n\n      {/* Red Alert */}\n      <div className=\"w-full max-w-lg bg-black\">\n        <LightBoard\n          text=\"DANGER ZONE\"\n          rows={10}\n          gap={1}\n          lightSize={5}\n          font=\"default\"\n          updateInterval={100}\n          colors={{\n            background: \"#1a0000\",\n            textDim: \"#4a0000\",\n            drawLine: \"#8a0000\",\n            textBright: \"#ff0000\",\n          }}\n        />\n      </div>\n\n      {/* Rainbow Scroll */}\n      <div className=\"w-full max-w-xl bg-black\">\n        <LightBoard\n          rows={15}\n          lightSize={2}\n          gap={1}\n          text=\"Colors of the Rainbow\"\n          font=\"default\"\n          updateInterval={200}\n          colors={{\n            background: \"#1a1a1a\",\n            textDim: \"#ff9999\",\n            drawLine: \"#ffff99\",\n            textBright: \"#99ffff\",\n          }}\n        />\n      </div>\n\n      {/* Matrix Style */}\n      <div className=\"w-full bg-black\">\n        <LightBoard\n          rows={20}\n          lightSize={3}\n          gap={1}\n          text=\"THE MATRIX HAS YOU\"\n          font=\"default\"\n          updateInterval={50}\n          colors={{\n            background: \"#001a00\",\n            textDim: \"#006600\",\n            drawLine: \"#00b300\",\n            textBright: \"#00ff00\",\n          }}\n        />\n      </div>\n\n      {/* Interactive Neon Board */}\n      <div className=\"w-full max-w-2xl bg-black\">\n        <LightBoard\n          rows={12}\n          lightSize={4}\n          gap={2}\n          text=\"NEON DREAMS\"\n          font=\"default\"\n          updateInterval={150}\n          colors={{\n            background: \"#0a0a0a\",\n            textDim: \"#ff00ff33\",\n            drawLine: \"#ff00ff66\",\n            textBright: \"#ff00ffff\",\n          }}\n        />\n      </div>\n\n      <h2 className=\"mb-3 text-xl font-semibold\">sketchpad</h2>\n      <p className=\"mb-3\">\n        Try drawing on this board by clicking and dragging.\n      </p>\n\n      <div className=\"dark:bg-background mb-2 bg-neutral-900\">\n        <LightBoard\n          rows={22}\n          lightSize={6}\n          gap={2}\n          text=\"\"\n          font=\"default\"\n          disableDrawing={false}\n          updateInterval={150}\n          colors={{\n            drawLine: \"#6CF2E8\",\n          }}\n          controlledDrawState={controlledDrawState}\n          onDrawStateChange={setControlledDrawState}\n          controlledHoverState={true}\n          onHoverStateChange={setControlledHoverState}\n        />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}