voice-button-demo

1"use client"
2 
3import { useEffect, useState } from "react"
4 
5import { VoiceButton } from "@/components/ui/voice-button"
6 
7export default function VoiceButtonDemo() {
8  const [state, setState] = useState<
9    "idle" | "recording" | "processing" | "success" | "error"
10  >("idle")
11 
12  const handlePress = () => {
13    if (state === "idle") {
14      setState("recording")
15    } else if (state === "recording") {
16      setState("processing")
17 
18      setTimeout(() => {
19        setState("success")
20 
21        setTimeout(() => {
22          setState("idle")
23        }, 1500)
24      }, 1000)
25    }
26  }
27 
28  useEffect(() => {
29    const handleKeyDown = (e: KeyboardEvent) => {
30      if (e.altKey && e.code === "Space") {
31        e.preventDefault()
32        handlePress()
33      }
34    }
35 
36    window.addEventListener("keydown", handleKeyDown)
37    return () => window.removeEventListener("keydown", handleKeyDown)
38  }, [state])
39 
40  return (
41    <div className="flex min-h-[200px] w-full items-center justify-center">
42      <VoiceButton
43        label="Voice"
44        trailing="⌥Space"
45        state={state}
46        onPress={handlePress}
47        className="min-w-[180px]"
48      />
49    </div>
50  )
51}