choice-poll-demo

1"use client"
2 
3import { useState } from "react"
4import {
5  Database01Icon,
6  DropboxIcon,
7  Github01Icon,
8  GoogleIcon,
9  NotionIcon,
10  SlackIcon,
11} from "@hugeicons/core-free-icons"
12import { HugeiconsIcon } from "@hugeicons/react"
13 
14import { Button } from "@/components/ui/button"
15import {
16  Card,
17  CardContent,
18  CardDescription,
19  CardHeader,
20  CardTitle,
21} from "@/components/ui/card"
22 
23import { ChoicePoll } from "../ui/choice-poll"
24 
25/* -----------------------------------------------------------------------------
26 * Integration options data
27 * -------------------------------------------------------------------------- */
28 
29const integrations = [
30  {
31    id: "slack",
32    label: "Slack",
33    description: "Team communication and notifications",
34    icon: SlackIcon,
35  },
36  {
37    id: "notion",
38    label: "Notion",
39    description: "Documentation and knowledge base",
40    icon: NotionIcon,
41  },
42  {
43    id: "github",
44    label: "GitHub",
45    description: "Code repositories and CI/CD",
46    icon: Github01Icon,
47  },
48  {
49    id: "google-drive",
50    label: "Google Drive",
51    description: "File storage and collaboration",
52    icon: GoogleIcon,
53  },
54  {
55    id: "dropbox",
56    label: "Dropbox",
57    description: "Cloud file storage",
58    icon: DropboxIcon,
59  },
60  {
61    id: "supabase",
62    label: "Supabase",
63    description: "Database and authentication",
64    icon: Database01Icon,
65  },
66]
67 
68/* -----------------------------------------------------------------------------
69 * Basic Example - Single Selection
70 * -------------------------------------------------------------------------- */
71 
72function ChoicePollBasicExample() {
73  const [selected, setSelected] = useState<string>("")
74  const [hasVoted, setHasVoted] = useState(false)
75 
76  const votes = {
77    slack: 234,
78    notion: 189,
79    github: 156,
80    "google-drive": 98,
81  }
82 
83  const handleVote = () => {
84    setHasVoted(true)
85  }
86 
87  return (
88    <Card className="w-full max-w-lg">
89      <CardHeader>
90        <CardTitle>Vote for Next Integration</CardTitle>
91        <CardDescription>
92          Help us prioritize which integration to build next
93        </CardDescription>
94      </CardHeader>
95      <CardContent>
96        <ChoicePoll.Root
97          hasVoted={hasVoted}
98          onValueChange={(v) =>
99            setSelected(Array.isArray(v) ? (v[0] ?? "") : v)
100          }
101          showResults
102          value={selected}
103          votes={votes}
104        >
105          <ChoicePoll.Options>
106// … truncated