Cookie 01

1"use client";
2 
3import { useState } from "react";
4import { Cookie } from "lucide-react";
5import { cn } from "@/lib/utils";
6import { Button } from "@/components/ui/button";
7import { Card, CardContent } from "@/components/ui/card";
8 
9interface Cookie01Props {
10  description?: string;
11  learnMore?: {
12    text?: string;
13    url?: string;
14  };
15  acceptButton?: {
16    text?: string;
17  };
18  declineButton?: {
19    text?: string;
20  };
21  className?: string;
22}
23 
24const Cookie01 = ({
25  description = "We use third-party cookies to personalize content, ads, and analyze site traffic.",
26  learnMore = {
27    text: "Learn more",
28    url: "#",
29  },
30  acceptButton = {
31    text: "Accept",
32  },
33  declineButton = {
34    text: "Decline",
35  },
36  className,
37}: Cookie01Props) => {
38  const [visible, setVisible] = useState(true);
39 
40  if (!visible) return null;
41 
42  return (
43    <div
44      className={cn(
45        "fixed bottom-0 z-50 w-full p-4 sm:right-4 sm:w-92",
46        className,
47      )}
48    >
49      <Card className="rounded-md shadow-none">
50        <CardContent className="flex flex-col items-center gap-5 p-6 text-center">
51          <Cookie className="size-10 text-primary" strokeWidth={1.5} />
52          <div className="flex flex-col items-center gap-2">
53            <p className="text-sm text-muted-foreground">{description}</p>
54            {learnMore && (
55              <a
56                href={learnMore.url}
57                className="text-sm font-medium underline underline-offset-4 transition-colors hover:text-muted-foreground"
58              >
59                {learnMore.text}
60              </a>
61            )}
62          </div>
63          <div className="flex w-full gap-3">
64            <Button className="flex-1" onClick={() => setVisible(false)}>
65              {acceptButton.text}
66            </Button>
67            <Button
68              variant="outline"
69              className="flex-1"
70              onClick={() => setVisible(false)}
71            >
72              {declineButton.text}
73            </Button>
74          </div>
75        </CardContent>
76      </Card>
77    </div>
78  );
79};
80 
81export default Cookie01;