"use client";
import { useState } from "react";
import { Cookie, Shield } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
const cookieCategories = [
{
id: "essential",
name: "Essential Cookies",
description: "Required for the website to function. Cannot be disabled.",
required: true,
},
{
id: "analytics",
name: "Analytics Cookies",
description: "Help us understand how visitors interact with our website.",
required: false,
},
{
id: "marketing",
name: "Marketing Cookies",
description: "Used to deliver personalized advertisements.",
required: false,
},
{
id: "functional",
name: "Functional Cookies",
description: "Enable enhanced functionality like chat widgets and videos.",
required: false,
},
];
export const title = "React Dialog Block Cookie Consent";
export default function DialogCookieConsent() {
const [open, setOpen] = useState(false);
const [preferences, setPreferences] = useState({
essential: true,
analytics: false,
marketing: false,
functional: false,
});
const handleToggle = (id: string) => {
if (id === "essential") return;
setPreferences((prev) => ({
...prev,
[id]: !prev[id as keyof typeof prev],
}));
};
const handleAcceptAll = () => {
setPreferences({
essential: true,
analytics: true,
marketing: true,
functional: true,
});
setOpen(false);
};
const handleSavePreferences = () => {
console.log("Saved preferences:", preferences);
setOpen(false);
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<div className="flex min-h-[350px] items-center justify-center">
<DialogTrigger asChild>
<Button variant="outline">
<Cookie className="mr-2 h-4 w-4" />
Cookie Settings
</Button>
</DialogTrigger>
</div>
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
<Shield className="h-5 w-5 text-primary" />
</div>
<div>
<DialogTitle>Cookie Preferences</DialogTitle>
<DialogDescription>
Manage your cookie settings below.
</DialogDescription>
</div>
</div>
</DialogHeader>
<div className="py-4 space-y-4">
<p className="text-sm text-muted-foreground">
We use cookies to enhance your browsing experience, analyze site
traffic, and personalize content. You can choose which cookies to
accept.
</p>
<div className="space-y-4">
{cookieCategories.map((category) => (
<div
key={category.id}
className="flex items-start justify-between gap-4 rounded-lg border p-4"
>
<div className="space-y-1">
<Label
htmlFor={category.id}
className="text-sm font-medium cursor-pointer"
>
{category.name}
{category.required && (
<span className="ml-2 text-xs text-muted-foreground">
(Required)
</span>
)}
</Label>
<p className="text-xs text-muted-foreground">
{category.description}
</p>
</div>
<Switch
id={category.id}
checked={preferences[category.id as keyof typeof preferences]}
onCheckedChange={() => handleToggle(category.id)}
disabled={category.required}
/>
</div>
))}
</div>
</div>
<DialogFooter className="flex-col sm:flex-row gap-2">
<Button variant="outline" onClick={handleSavePreferences} className="sm:flex-1">
Save Preferences
</Button>
<Button onClick={handleAcceptAll} className="sm:flex-1">
Accept All
</Button>
</DialogFooter>
<p className="text-xs text-center text-muted-foreground">
By clicking "Accept All", you consent to all cookies. Read our{" "}
<a href="#" className="underline hover:text-foreground">
Privacy Policy
</a>{" "}
for more information.
</p>
</DialogContent>
</Dialog>
);
}