Consent Manager

1import {
2  ConsentManagerDialog,
3  ConsentManagerProvider,
4  CookieBanner,
5} from "@c15t/nextjs";
6 
7import { buttonVariants } from "@/components/ui/button";
8import { cn } from "@/lib/utils";
9 
10import { ConsentManagerClient } from "./consent-manager-client";
11 
12export function ConsentManager({ children }: { children: React.ReactNode }) {
13  return (
14    <ConsentManagerProvider
15      options={{
16        mode: "offline",
17        consentCategories: ["necessary", "measurement"],
18        // ignoreGeoLocation: process.env.NODE_ENV === "development", // Useful for development to always view the banner.
19      }}
20    >
21      <CookieBanner
22        theme={{
23          "banner.card": {
24            noStyle: true,
25            className: cn(
26              "relative w-full max-w-(--banner-max-width) divide-y overflow-hidden rounded-2xl",
27              "bg-popover text-popover-foreground shadow-popover ring ring-popover-border"
28            ),
29          },
30          "banner.header.title": {
31            noStyle: true,
32            className: "text-lg font-semibold text-foreground",
33          },
34          "banner.header.description": {
35            noStyle: true,
36            className: "text-sm text-muted-foreground",
37          },
38          "banner.footer": {
39            style: {
40              "--banner-footer-background-color": "transparent",
41              "--banner-footer-background-color-dark": "transparent",
42            },
43          },
44          "banner.footer.reject-button": {
45            noStyle: true,
46            className: buttonVariants({ variant: "secondary" }),
47          },
48          "banner.footer.accept-button": {
49            noStyle: true,
50            className: buttonVariants({ variant: "secondary" }),
51          },
52          "banner.footer.customize-button": {
53            noStyle: true,
54            className: buttonVariants({ variant: "default" }),
55          },
56        }}
57      />
58 
59      <ConsentManagerDialog
60        theme={{
61          "dialog.root": {
62            noStyle: true,
63            style: {
64              "--dialog-card-radius": "1rem",
65 
66              "--dialog-background-color": "var(--background)",
67              "--dialog-background-color-dark": "var(--background)",
68 
69              "--dialog-border-color": "var(--border)",
70              "--dialog-border-color-dark": "var(--border)",
71            },
72            className:
73              "rounded-2xl border-none bg-background shadow-popover ring ring-popover-border",
74          },
75          "dialog.overlay": {
76// … truncated