A cookie/privacy consent panel that lists granular tracking categories with per-category toggles and names who each category's data is shared with, plus equal-weight 'Reject all' / 'Accept all' / 'Save choices' actions.
"use client";
import ConsentManager from "@/components/ui/consent-manager";
import { useState } from "react";
const categories = [
{
id: "essential",
label: "Essential",
description: "Keeps you signed in and remembers items in your cart.",
required: true,
},
{
id: "analytics",
label: "Analytics",
description: "Helps us see which pages are useful and which are not.",
recipients: ["Fathom"],
},
{
id: "personalization",
label: "Personalization",
description:
"Remembers your preferences across visits, like language and layout.",
recipients: ["Acme Preferences Service"],
},
{
id: "marketing",
label: "Marketing",
description: "Lets us show you relevant ads for this site on other sites.",
recipients: ["Meta Ads", "Google Ads"],
},
];
export default function ConsentManagerDemo() {
const [value, setValue] = useState({
essential: true,
analytics: true,
personalization: false,
marketing: false,
});
return (
<div className="flex w-full items-center justify-center bg-background p-6">
<div className="w-full max-w-md">
<ConsentManager
label="Cookie preferences"
description="Choose what Acme Co. is allowed to use. Required categories keep the service working and cannot be turned off."
categories={categories}
value={value}
onChange={setValue}
onSave={(next) => {
setValue(next);
console.log("Saved consent choices", next);
}}
/>
</div>
</div>
);
}