Feedback Bar

1import { cn } from "@/lib/utils"
2import { ThumbsDown, ThumbsUp, X } from "lucide-react"
3 
4type FeedbackBarProps = {
5  className?: string
6  title?: string
7  icon?: React.ReactNode
8  onHelpful?: () => void
9  onNotHelpful?: () => void
10  onClose?: () => void
11}
12 
13export function FeedbackBar({
14  className,
15  title,
16  icon,
17  onHelpful,
18  onNotHelpful,
19  onClose,
20}: FeedbackBarProps) {
21  return (
22    <div
23      className={cn(
24        "bg-background border-border inline-flex rounded-[12px] border text-sm",
25        className
26      )}
27    >
28      <div className="flex w-full items-center justify-between">
29        <div className="flex flex-1 items-center justify-start gap-4 py-3 pl-4">
30          {icon}
31          <span className="text-foreground font-medium">{title}</span>
32        </div>
33        <div className="flex items-center justify-center gap-0.5 px-3 py-0">
34          <button
35            type="button"
36            className="text-muted-foreground hover:text-foreground flex size-8 items-center justify-center rounded-md transition-colors"
37            aria-label="Helpful"
38            onClick={onHelpful}
39          >
40            <ThumbsUp className="size-4" />
41          </button>
42          <button
43            type="button"
44            className="text-muted-foreground hover:text-foreground flex size-8 items-center justify-center rounded-md transition-colors"
45            aria-label="Not helpful"
46            onClick={onNotHelpful}
47          >
48            <ThumbsDown className="size-4" />
49          </button>
50        </div>
51        <div className="border-border flex items-center justify-center border-l">
52          <button
53            type="button"
54            onClick={onClose}
55            className="text-muted-foreground hover:text-foreground flex items-center justify-center rounded-md p-3"
56            aria-label="Close"
57          >
58            <X className="size-5" />
59          </button>
60        </div>
61      </div>
62    </div>
63  )
64}