voice-picker-demo

1"use client"
2 
3import { useState } from "react"
4import type { ElevenLabs } from "@elevenlabs/elevenlabs-js"
5 
6import { VoicePicker } from "@/components/ui/voice-picker"
7 
8const voices: ElevenLabs.Voice[] = [
9  {
10    voiceId: "21m00Tcm4TlvDq8ikWAM",
11    name: "Rachel",
12    category: "premade",
13    labels: {
14      accent: "american",
15      descriptive: "casual",
16      age: "young",
17      gender: "female",
18      language: "en",
19      use_case: "conversational",
20    },
21    description:
22      "Matter-of-fact, personable woman. Great for conversational use cases.",
23    previewUrl:
24      "https://storage.googleapis.com/eleven-public-prod/premade/voices/21m00Tcm4TlvDq8ikWAM/b4928a68-c03b-411f-8533-3d5c299fd451.mp3",
25  },
26  {
27    voiceId: "29vD33N1CtxCmqQRPOHJ",
28    name: "Drew",
29    category: "premade",
30    labels: {
31      accent: "american",
32      description: "well-rounded",
33      age: "middle_aged",
34      gender: "male",
35      use_case: "news",
36    },
37    previewUrl:
38      "https://storage.googleapis.com/eleven-public-prod/premade/voices/29vD33N1CtxCmqQRPOHJ/b99fc51d-12d3-4312-b480-a8a45a7d51ef.mp3",
39  },
40  {
41    voiceId: "2EiwWnXFnvU5JabPnv8n",
42    name: "Clyde",
43    category: "premade",
44    labels: {
45      accent: "american",
46      descriptive: "intense",
47      age: "middle_aged",
48      gender: "male",
49      language: "en",
50      use_case: "characters_animation",
51    },
52    description: "Great for character use-cases",
53    previewUrl:
54      "https://storage.googleapis.com/eleven-public-prod/premade/voices/2EiwWnXFnvU5JabPnv8n/65d80f52-703f-4cae-a91d-75d4e200ed02.mp3",
55  },
56]
57 
58export default function VoicePickerDemo() {
59  const [selectedVoice, setSelectedVoice] = useState<string>(
60    "21m00Tcm4TlvDq8ikWAM"
61  )
62  const [open, setOpen] = useState(false)
63 
64  return (
65    <div className="w-full max-w-lg">
66      <VoicePicker
67        voices={voices}
68        value={selectedVoice}
69        onValueChange={(value) => {
70          setSelectedVoice(value)
71          // Keep dropdown open after selection
72          setOpen(true)
73        }}
74        open={open}
75        onOpenChange={setOpen}
76        placeholder="Select a voice..."
77      />
78    </div>
79  )
80}