Poll Widget

Copy
import { useCallback, useMemo, useState } from "react"
import { PollWidget } from "@/registry/default/ui/poll-widget"
 
const options = [
  { id: "speed", label: "Faster builds" },
  { id: "dx", label: "Better DX" },
  { id: "docs", label: "Clearer docs" },
]
 
export default function Example() {
  const [votes, setVotes] = useState({ speed: 0, dx: 0, docs: 0 })
  const [hasVoted, setHasVoted] = useState(false)
 
  const onVote = useCallback((selectedIds: string[]) => {
    setVotes((prev) => {
      const next = { ...prev }
      for (const id of selectedIds) next[id] = (next[id] ?? 0) + 1
      return next
    })
    setHasVoted(true)
  }, [])
 
  return (
    <PollWidget
      question="Which feature matters most?"
      description="Pick one, then submit."
      options={options}
      votes={votes}
      hasVoted={hasVoted}
      onVote={onVote}
      mode="inline"
    >
      <PollWidget.Content>
        <PollWidget.Question />
        <PollWidget.Options>
          {options.map((opt) => (
            <PollWidget.Option key={opt.id} value={opt.id}>
              <PollWidget.Indicator />
              <PollWidget.Label>{opt.label}</PollWidget.Label>
              <PollWidget.Percentage />
            </PollWidget.Option>
          ))}
        </PollWidget.Options>
        <PollWidget.Results />
        <PollWidget.Submit />
      </PollWidget.Content>
    </PollWidget>
  )
}