bar-visualizer-demo

1"use client"
2 
3import { useState } from "react"
4 
5import {
6  BarVisualizer,
7  type AgentState,
8} from "@/components/ui/bar-visualizer"
9import { Button } from "@/components/ui/button"
10import {
11  Card,
12  CardContent,
13  CardDescription,
14  CardHeader,
15  CardTitle,
16} from "@/components/ui/card"
17 
18export default function BarVisualizerDemo() {
19  const [state, setState] = useState<AgentState>("listening")
20 
21  return (
22    <Card className="">
23      <CardHeader>
24        <CardTitle>Audio Frequency Visualizer</CardTitle>
25        <CardDescription>
26          Real-time frequency band visualization with animated state transitions
27        </CardDescription>
28      </CardHeader>
29      <CardContent>
30        <div className="space-y-4">
31          <BarVisualizer
32            state={state}
33            demo={true}
34            barCount={20}
35            minHeight={15}
36            maxHeight={90}
37            className="h-40 max-w-full"
38          />
39 
40          <div className="flex flex-wrap gap-2">
41            <Button
42              size="sm"
43              variant={state === "connecting" ? "default" : "outline"}
44              onClick={() => setState("connecting")}
45            >
46              Connecting
47            </Button>
48            <Button
49              size="sm"
50              variant={state === "initializing" ? "default" : "outline"}
51              onClick={() => setState("initializing")}
52            >
53              Initializing
54            </Button>
55            <Button
56              size="sm"
57              variant={state === "listening" ? "default" : "outline"}
58              onClick={() => setState("listening")}
59            >
60              Listening
61            </Button>
62            <Button
63              size="sm"
64              variant={state === "speaking" ? "default" : "outline"}
65              onClick={() => setState("speaking")}
66            >
67              Speaking
68            </Button>
69            <Button
70              size="sm"
71              variant={state === "thinking" ? "default" : "outline"}
72              onClick={() => setState("thinking")}
73            >
74              Thinking
75            </Button>
76          </div>
77        </div>
78      </CardContent>
79    </Card>
80  )
81}