63:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 64:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 65:T28a9,"use client" import { useState } from "react" import { Database01Icon, DropboxIcon, Github01Icon, GoogleIcon, NotionIcon, SlackIcon, } from "@hugeicons/core-free-icons" import { HugeiconsIcon } from "@hugeicons/react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card" import { ChoicePoll } from "../ui/choice-poll" /* ----------------------------------------------------------------------------- * Integration options data * -------------------------------------------------------------------------- */ const integrations = [ { id: "slack", label: "Slack", description: "Team communication and notifications", icon: SlackIcon, }, { id: "notion", label: "Notion", description: "Documentation and knowledge base", icon: NotionIcon, }, { id: "github", label: "GitHub", description: "Code repositories and CI/CD", icon: Github01Icon, }, { id: "google-drive", label: "Google Drive", description: "File storage and collaboration", icon: GoogleIcon, }, { id: "dropbox", label: "Dropbox", description: "Cloud file storage", icon: DropboxIcon, }, { id: "supabase", label: "Supabase", description: "Database and authentication", icon: Database01Icon, }, ] /* ----------------------------------------------------------------------------- * Basic Example - Single Selection * -------------------------------------------------------------------------- */ function ChoicePollBasicExample() { const [selected, setSelected] = useState("") const [hasVoted, setHasVoted] = useState(false) const votes = { slack: 234, notion: 189, github: 156, "google-drive": 98, } const handleVote = () => { setHasVoted(true) } return ( Vote for Next Integration Help us prioritize which integration to build next setSelected(Array.isArray(v) ? (v[0] ?? "") : v) } showResults value={selected} votes={votes} > {integrations.slice(0, 4).map((integration) => (

{integration.label}

))} {!hasVoted && (

)} ) } /* ----------------------------------------------------------------------------- * With Results Example * -------------------------------------------------------------------------- */ function ChoicePollWithResultsExample() { const [selected, setSelected] = useState("") const [hasVoted, setHasVoted] = useState(false) const votes = { slack: 100, notion: 189, github: 256, "google-drive": 98, } const handleVote = () => { setHasVoted(true) } return ( Vote for Next Integration Help us prioritize which integration to build next setSelected(Array.isArray(v) ? (v[0] ?? "") : v) } showResults value={selected} votes={votes} > {integrations.slice(0, 4).map((integration) => (

{integration.label}

))} {!hasVoted && (

)} ) } /* ----------------------------------------------------------------------------- * Multiple Selection Example * -------------------------------------------------------------------------- */ function ChoicePollMultipleExample() { const [selected, setSelected] = useState([]) const [hasVoted, setHasVoted] = useState(false) const votes = { slack: 100, notion: 189, github: 256, "google-drive": 198, dropbox: 98, supabase: 156, } const handleVote = () => { setHasVoted(true) } return ( Choose Your Top Integrations Select up to 3 integrations you'd like us to prioritize setSelected(val as string[])} showResults value={selected} votes={votes} > {integrations.map((integration) => ( = 3 && !selected.includes(integration.id) } key={integration.id} value={integration.id} >

{integration.label} {integration.description}

))} {!hasVoted && (

)} ) } /* ----------------------------------------------------------------------------- * Compact Inline Example * -------------------------------------------------------------------------- */ function ChoicePollCompactExample() { const [selected, setSelected] = useState("") return (

setSelected(Array.isArray(v) ? (v[0] ?? "") : v)} value={selected} > Quick Poll Which feature would you like next? Dark Mode Mobile App API Access

) } /* ----------------------------------------------------------------------------- * Combined Demo * -------------------------------------------------------------------------- */ export default function ChoicePollDemo() { return (

Single Selection

With Results

Multiple Selection

Compact

) } 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":["choice-poll"]}]]}],null]}],["$","$L64",null,{"files":[{"path":"registry/default/example/choice-poll-demo.tsx","content":"$65","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]