Cookie Consent

1"use client";
2 
3import * as React from "react";
4 
5import { Button } from "@/components/ui/button";
6import { cn } from "@/lib/utils";
7 
8type CookieConsentDecision = "accepted" | "declined";
9 
10type CookieConsentProps = React.ComponentProps<"div"> & {
11  acceptLabel?: React.ReactNode;
12  defaultOpen?: boolean;
13  declineLabel?: React.ReactNode;
14  dismissOnConsent?: boolean;
15  learnMoreHref?: string;
16  learnMoreLabel?: React.ReactNode;
17  onAccept?: (event: React.MouseEvent<HTMLButtonElement>) => void;
18  onConsentChange?: (
19    decision: CookieConsentDecision,
20    event: React.MouseEvent<HTMLButtonElement>,
21  ) => void;
22  onDecline?: (event: React.MouseEvent<HTMLButtonElement>) => void;
23  onOpenChange?: (open: boolean) => void;
24  open?: boolean;
25};
26 
27function CookieConsent({
28  acceptLabel = "Accept",
29  defaultOpen = true,
30  declineLabel = "Decline",
31  dismissOnConsent = true,
32  learnMoreHref = "#",
33  learnMoreLabel = "Learn more.",
34  onAccept,
35  onConsentChange,
36  onDecline,
37  onOpenChange,
38  open,
39  className,
40  children,
41  ...props
42}: CookieConsentProps) {
43  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
44  const isControlled = open !== undefined;
45  const isOpen = isControlled ? open : uncontrolledOpen;
46 
47  const setOpen = React.useCallback(
48    (nextOpen: boolean) => {
49      if (!isControlled) {
50        setUncontrolledOpen(nextOpen);
51      }
52 
53      onOpenChange?.(nextOpen);
54    },
55    [isControlled, onOpenChange],
56  );
57 
58  const handleConsent = React.useCallback(
59    (decision: CookieConsentDecision, event: React.MouseEvent<HTMLButtonElement>) => {
60      if (decision === "accepted") {
61        onAccept?.(event);
62      } else {
63        onDecline?.(event);
64      }
65 
66      onConsentChange?.(decision, event);
67 
68      if (dismissOnConsent && !event.defaultPrevented) {
69        setOpen(false);
70      }
71    },
72    [dismissOnConsent, onAccept, onConsentChange, onDecline, setOpen],
73  );
74 
75  if (!isOpen) {
76    return null;
77  }
78 
79  return (
80    <div
81      role="dialog"
82      aria-label="Cookie consent"
83      data-slot="cookie-consent"
84      className={cn("max-w-[260px] rounded-lg border bg-card p-3 shadow-md", className)}
85      {...props}
86    >
87      <p className="text-xs leading-relaxed text-pretty text-muted-foreground">
88        {children ?? (
89          <>
90            We use cookies to understand how you use our service.{" "}
91            <a
92              href={learnMoreHref}
93// … truncated