lightboard

1"use client"
2 
3import { useState } from "react"
4 
5import { LightBoard, PatternCell } from "../ui/lightboard"
6 
7export function LightBoardDemo() {
8  const [controlledDrawState, setControlledDrawState] =
9    useState<PatternCell>("2")
10  const [controlledHoverState, setControlledHoverState] = useState(false)
11 
12  const cycleDrawState = () => {
13    setControlledDrawState((prev) => {
14      switch (prev) {
15        case "0":
16          return "1"
17        case "1":
18          return "2"
19        case "2":
20          return "3"
21        case "3":
22          return "0"
23        default:
24          return "0"
25      }
26    })
27  }
28 
29  return (
30    <div className="space-y-2 lg:space-y-4 p-2 lg:p-8">
31      <h1 className="text-3xl font-bold text-white">LightBoard Demo</h1>
32 
33      {/* Controlled Interactive Board */}
34      <div className="max-w-2xl w-full">
35        <h2 className="text-xl font-semibold  mb-3">
36          Controlled LightBoard with draw support
37        </h2>
38        <p className=" mb-3">
39          Try drawing on this board by clicking and dragging.
40        </p>
41 
42        <div className="flex space-x-4 mb-3">
43          <button
44            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm"
45            onClick={cycleDrawState}
46          >
47            Draw Color: {controlledDrawState}
48          </button>
49          <button
50            className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded text-sm"
51            onClick={() => setControlledHoverState((prev) => !prev)}
52          >
53            Toggle Scroll: {controlledHoverState ? "On" : "Off"}
54          </button>
55        </div>
56 
57        <div className="bg-neutral-900 dark:bg-background">
58          <LightBoard
59            rows={12}
60            lightSize={6}
61            gap={2}
62            text="CONTROLLED BOARD"
63            font="default"
64            disableDrawing={false}
65            updateInterval={150}
66            colors={{
67              background: "#0a0a0a",
68              textDim: "#555555",
69              drawLine: "#E78AEA",
70              textBright: "#FFFFFF",
71            }}
72            controlledDrawState={controlledDrawState}
73            onDrawStateChange={setControlledDrawState}
74            controlledHoverState={controlledHoverState}
75            onHoverStateChange={setControlledHoverState}
76          />
77        </div>
78      </div>
79 
80      <h2 className="text-xl font-semibold  mb-3">Drawing disabled</h2>
81 
82      {/* Basic example */}
83      <div className="max-w-md w-full bg-black">
84        <LightBoard
85          text="Hello World"
86          rows={7}
87          gap={1}
88          lightSize={4}
89          font="default"
90          updateInterval={150}
91          colors={{
92            background: "#1a1a1a",
93            textDim: "#3a3a3a",
94            drawLine: "#7a7a7a",
95            textBright: "#ffffff",
96          }}
97        />
98      </div>
99 
100      {/* Red Alert */}
101      <div className="max-w-lg w-full bg-black">
102        <LightBoard
103          text="DANGER ZONE"
104          rows={10}
105          gap={1}
106          lightSize={5}
107          font="default"
108          updateInterval={100}
109          colors={{
110            background: "#1a0000",
111            textDim: "#4a0000",
112            drawLine: "#8a0000",
113            textBright: "#ff0000",
114          }}
115        />
116      </div>
117 
118      {/* Rainbow Scroll */}
119      <div className="max-w-xl w-full bg-black">
120        <LightBoard
121          rows={15}
122          lightSize={2}
123          gap={1}
124          text="Colors of the Rainbow"
125          font="default"
126          updateInterval={200}
127          colors={{
128            background: "#1a1a1a",
129            textDim: "#ff9999",
130            drawLine: "#ffff99",
131            textBright: "#99ffff",
132          }}
133        />
134      </div>
135 
136      {/* Matrix Style */}
137      <div className="w-full bg-black">
138        <LightBoard
139          rows={20}
140          lightSize={3}
141          gap={1}
142          text="THE MATRIX HAS YOU"
143          font="default"
144          updateInterval={50}
145          colors={{
146            background: "#001a00",
147            textDim: "#006600",
148            drawLine: "#00b300",
149            textBright: "#00ff00",
150          }}
151        />
152      </div>
153 
154      {/* Interactive Neon Board */}
155      <div className="max-w-2xl w-full bg-black">
156        <LightBoard
157          rows={12}
158          lightSize={4}
159          gap={2}
160          text="NEON DREAMS"
161          font="default"
162          updateInterval={150}
163          colors={{
164            background: "#0a0a0a",
165            textDim: "#ff00ff33",
166            drawLine: "#ff00ff66",
167            textBright: "#ff00ffff",
168          }}
169        />
170      </div>
171 
172      <h2 className="text-xl font-semibold  mb-3">sketchpad</h2>
173      <p className=" mb-3">
174        Try drawing on this board by clicking and dragging.
175      </p>
176 
177      <div className="bg-neutral-900 dark:bg-background mb-2">
178        <LightBoard
179          rows={22}
180          lightSize={6}
181          gap={2}
182          text=""
183          font="default"
184          disableDrawing={false}
185          updateInterval={150}
186          colors={{
187            drawLine: "#6CF2E8",
188          }}
189          controlledDrawState={controlledDrawState}
190          onDrawStateChange={setControlledDrawState}
191          controlledHoverState={true}
192          onHoverStateChange={setControlledHoverState}
193        />
194      </div>
195    </div>
196  )
197}