live-waveform-demo

1"use client"
2 
3import { useState } from "react"
4 
5import { Button } from "@/components/ui/button"
6import { LiveWaveform } from "@/components/ui/live-waveform"
7 
8export default function LiveWaveformDemo() {
9  const [active, setActive] = useState(false)
10  const [processing, setProcessing] = useState(false)
11  const [mode, setMode] = useState<"static" | "scrolling">("static")
12 
13  const handleToggleActive = () => {
14    setActive(!active)
15    if (!active) {
16      setProcessing(false)
17    }
18  }
19 
20  const handleToggleProcessing = () => {
21    setProcessing(!processing)
22    if (!processing) {
23      setActive(false)
24    }
25  }
26 
27  return (
28    <div className="bg-card w-full rounded-lg border p-6">
29      <div className="mb-4">
30        <h3 className="text-lg font-semibold">Live Audio Waveform</h3>
31        <p className="text-muted-foreground text-sm">
32          Real-time microphone input visualization with audio reactivity
33        </p>
34      </div>
35 
36      <div className="space-y-4">
37        <LiveWaveform
38          active={active}
39          processing={processing}
40          height={80}
41          barWidth={3}
42          barGap={2}
43          mode={mode}
44          fadeEdges={true}
45          barColor="gray"
46          historySize={120}
47        />
48 
49        <div className="flex flex-wrap justify-center gap-2">
50          <Button
51            size="sm"
52            variant={active ? "default" : "outline"}
53            onClick={handleToggleActive}
54          >
55            {active ? "Stop" : "Start"} Listening
56          </Button>
57          <Button
58            size="sm"
59            variant={processing ? "default" : "outline"}
60            onClick={handleToggleProcessing}
61          >
62            {processing ? "Stop" : "Start"} Processing
63          </Button>
64          <Button
65            size="sm"
66            variant="outline"
67            onClick={() => setMode(mode === "static" ? "scrolling" : "static")}
68          >
69            Mode: {mode === "static" ? "Static" : "Scrolling"}
70          </Button>
71        </div>
72      </div>
73    </div>
74  )
75}