Consent Manager

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