Vote Feedback

1import * as React from "react"
2import { VoteFeedback, type VoteFeedbackRootProps } from "@kelet-ai/feedback-ui"
3import { ThumbsDown, ThumbsUp } from "lucide-react"
4 
5import { cn } from "@/lib/utils"
6import { Button } from "@/components/ui/button"
7import {
8  Popover,
9  PopoverContent,
10  PopoverTrigger,
11} from "@/components/ui/popover"
12import { Textarea } from "@/components/ui/textarea"
13 
14interface ShadcnVoteFeedbackProps
15  extends Omit<VoteFeedbackRootProps, "children"> {
16  children?: React.ReactNode
17  variant?: "default" | "outline" | "ghost" | "secondary"
18  size?: "default" | "sm" | "lg" | "icon"
19  title?: string
20  description?: string
21  placeholder?: string
22  className?: string
23}
24 
25const ShadcnVoteFeedback = React.forwardRef<
26  HTMLDivElement,
27  ShadcnVoteFeedbackProps
28>(
29  (
30    {
31      children,
32      variant = "outline",
33      size = "sm",
34      title = "Feedback",
35      description = "Help us improve by sharing your thoughts.",
36      placeholder = "What could we do better?",
37      className,
38      ...props
39    },
40    ref
41  ) => {
42    let selectedVariant = variant
43    let selectedBg = ""
44    switch (variant) {
45      case "outline":
46        selectedBg = "bg-secondary"
47        break
48      case "secondary":
49        selectedVariant = "default"
50        break
51      case "ghost":
52        selectedBg = "bg-secondary"
53        break
54      case "default":
55        selectedVariant = "secondary"
56        break
57    }
58    return (
59      <div ref={ref} className={cn("flex items-center gap-1", className)}>
60        <VoteFeedback.Root {...props}>
61          {/* Upvote Button */}
62          <VoteFeedback.UpvoteButton asChild>
63            {({ isSelected }) => (
64              <Button
65                variant={isSelected ? selectedVariant : variant}
66                size={size}
67                className={`h-8 w-8 p-0 ${isSelected ? `${selectedBg}` : ""}`}
68                data-selected={isSelected}
69                aria-label="Helpful"
70              >
71                <ThumbsUp className="h-4 w-4" />
72                <span className="sr-only">Helpful</span>
73              </Button>
74            )}
75          </VoteFeedback.UpvoteButton>
76 
77          {/* Downvote Button with Popover */}
78          <Popover>
79            <VoteFeedback.DownvoteButton asChild>
80              {({ isSelected }) => (
81                <PopoverTrigger asChild>
82                  <Button
83                    variant={isSelected ? selectedVariant : variant}
84                    size={size}
85// … truncated