orb-demo

1"use client"
2 
3import { useState } from "react"
4 
5import { Button } from "@/components/ui/button"
6import { AgentState, Orb } from "@/components/ui/orb"
7 
8let ORBS: [string, string][] = [
9  ["#CADCFC", "#A0B9D1"],
10  ["#F6E7D8", "#E0CFC2"],
11  ["#E5E7EB", "#9CA3AF"],
12]
13 
14export default function OrbDemo({ small = false }: { small?: boolean }) {
15  const [agent, setAgent] = useState<AgentState>(null)
16 
17  ORBS = small ? [ORBS[0]] : ORBS
18 
19  return (
20    <div className="bg-card w-full rounded-lg border p-6">
21      <div className="mb-4">
22        <h3 className="text-lg font-semibold">Agent Orbs</h3>
23        <p className="text-muted-foreground text-sm">
24          Interactive orb visualization with agent states
25        </p>
26      </div>
27 
28      <div className="space-y-4">
29        <div className="flex justify-center gap-8">
30          {ORBS.map((colors, index) => (
31            <div
32              key={index}
33              className={`relative ${index === 1 ? "block md:block" : "hidden md:block"}`}
34            >
35              <div className="bg-muted relative h-32 w-32 rounded-full p-1 shadow-[inset_0_2px_8px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_2px_8px_rgba(0,0,0,0.5)]">
36                <div className="bg-background h-full w-full overflow-hidden rounded-full shadow-[inset_0_0_12px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_0_12px_rgba(0,0,0,0.3)]">
37                  <Orb
38                    colors={colors}
39                    seed={(index + 1) * 1000}
40                    agentState={agent}
41                  />
42                </div>
43              </div>
44            </div>
45          ))}
46        </div>
47 
48        <div className="flex flex-wrap justify-center gap-2">
49          <Button
50            size="sm"
51            variant="outline"
52            onClick={() => setAgent(null)}
53            disabled={agent === null}
54          >
55            Idle
56          </Button>
57          <Button
58            size="sm"
59            variant="outline"
60            onClick={() => setAgent("listening")}
61            disabled={agent === "listening"}
62          >
63            Listening
64          </Button>
65          <Button
66            size="sm"
67            variant="outline"
68            disabled={agent === "talking"}
69            onClick={() => setAgent("talking")}
70          >
71            Talking
72          </Button>
73        </div>
74      </div>
75    </div>
76  )
77}