Banner Cookie

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6export interface BannerCookieProps {
7  description?: string;
8  onAccept?: () => void;
9  onDecline?: () => void;
10  className?: string;
11}
12 
13export function BannerCookie({
14  description = "This site uses cookies to improve your experience.",
15  onAccept,
16  onDecline,
17  className,
18}: BannerCookieProps) {
19  const [leaving, setLeaving] = React.useState(false);
20  const [gone, setGone] = React.useState(false);
21 
22  const dismiss = (cb?: () => void) => {
23    setLeaving(true);
24    setTimeout(() => {
25      setGone(true);
26      cb?.();
27    }, 300);
28  };
29 
30  if (gone) return null;
31 
32  return (
33    <div
34      className={cn(
35        /* ── surface ── */
36        "relative w-full max-w-[340px] overflow-hidden rounded-2xl border border-border bg-card p-5",
37        /* ── depth: outline + tight + ambient ── */
38        "shadow-[0_0_0_0.5px_rgba(0,0,0,0.06),0_1px_3px_rgba(0,0,0,0.06),0_12px_24px_-6px_rgba(0,0,0,0.1)]",
39        /* ── top-edge glass highlight ── */
40        "after:pointer-events-none after:absolute after:inset-x-4 after:top-0 after:h-px after:bg-gradient-to-r after:from-transparent after:via-foreground/[0.06] after:to-transparent",
41        /* ── entrance / exit ── */
42        leaving
43          ? "animate-[cookie-leave_0.25s_ease-out_forwards]"
44          : "animate-[cookie-enter_0.5s_cubic-bezier(0.16,1,0.3,1)_both]",
45        className,
46      )}
47    >
48      <p className="text-sm leading-relaxed text-muted-foreground">
49        {description}
50      </p>
51 
52      <div className="mt-4 flex items-center justify-end gap-3">
53        {/* ── Decline: ghost + sliding underline reveal ── */}
54        <button
55          type="button"
56          onClick={() => dismiss(onDecline)}
57          className="group relative h-8 px-3 text-sm font-medium text-muted-foreground transition-colors duration-200 hover:text-foreground"
58        >
59          Decline
60          <span className="absolute inset-x-1 -bottom-px h-px origin-left scale-x-0 bg-current transition-transform duration-200 ease-out group-hover:scale-x-100" />
61        </button>
62 
63        {/* ── Accept: pill + shadow elevator + press scale ── */}
64        <button
65          type="button"
66          onClick={() => dismiss(onAccept)}
67// … truncated