Marco
72b7bc629c
Was full-width ('wide' theme) with Klaro's default green/dark
palette, neither matching the brand. Now: compact bottom-left corner
notice (~380px), brand colors via Klaro's CSS-var overrides
(dark1/light1 etc. — confusingly named, they're background/text, not
a dark-mode switch), neutral gray decline button instead of red.
Also adds a persistent bottom-left cookie icon (KlaroConsentManager.tsx)
so a visitor can reopen the consent manager any time via Klaro.show(),
not just on first visit.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
72 lines
3.2 KiB
TypeScript
72 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import "klaro/dist/klaro.css";
|
|
import type { TrackingCode } from "../lib/payload";
|
|
import { buildKlaroConfig } from "../lib/klaroConfig";
|
|
import { loadTrackingCode } from "../lib/loadTrackingCode";
|
|
|
|
// Replaced a hand-rolled CookieBanner.tsx + useConsent.ts + TrackingScripts.tsx
|
|
// with kiprotect/klaro (open source, self-hosted, npm install klaro) —
|
|
// the custom banner only ever covered the accept/reject UI itself; Klaro
|
|
// additionally brings a real per-service consent list, bundled German UI
|
|
// translations, and (via `cookies`, not used here yet) cookie-deletion on
|
|
// withdrawal — all things a hand-rolled version would have had to build
|
|
// from scratch. See project memory for the fuller reasoning.
|
|
//
|
|
// Dynamically imported inside an effect (client-only, after mount) rather
|
|
// than a static top-level import — Klaro touches `window`/`document` at
|
|
// module-eval time in places, which isn't SSR-safe. The CSS import above
|
|
// stays static (Next.js requires CSS imports to be static, not inside a
|
|
// dynamic import()), paired with the "-no-css" JS build so the stylesheet
|
|
// isn't loaded twice.
|
|
export function KlaroConsentManager({ codes }: { codes: TrackingCode[] }) {
|
|
// Kept in state (not just called once) so the persistent reopen button
|
|
// below can call Klaro.show() itself, any time after the initial
|
|
// accept/reject decision — a visitor must always be able to revisit
|
|
// their choice, not just on first load.
|
|
const [klaroModule, setKlaroModule] = useState<typeof import("klaro/dist/klaro-no-css") | null>(null);
|
|
|
|
useEffect(() => {
|
|
// Nothing to ask consent for — don't even load/render Klaro. A cookie
|
|
// banner with zero services to list would just be visual noise.
|
|
if (codes.length === 0) return;
|
|
|
|
let cancelled = false;
|
|
import("klaro/dist/klaro-no-css").then((Klaro) => {
|
|
if (cancelled) return;
|
|
const config = buildKlaroConfig(codes, loadTrackingCode);
|
|
Klaro.setup(config);
|
|
setKlaroModule(Klaro);
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps -- `codes` comes
|
|
// from a server-fetched, 60s-ISR-cached layout prop; it's stable for
|
|
// the lifetime of this component in practice, and Klaro.setup() isn't
|
|
// meant to be called more than once per page load anyway.
|
|
}, []);
|
|
|
|
if (!klaroModule) return null;
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => klaroModule.show()}
|
|
aria-label="Cookie-Einstellungen öffnen"
|
|
title="Cookie-Einstellungen"
|
|
className="fixed bottom-5 left-5 z-40 flex h-11 w-11 items-center justify-center rounded-full border border-border bg-bg-base shadow-md hover:border-brand transition-colors"
|
|
>
|
|
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6" />
|
|
<circle cx="9" cy="9.5" r="1.1" fill="currentColor" />
|
|
<circle cx="14" cy="8.5" r="1" fill="currentColor" />
|
|
<circle cx="15" cy="13.5" r="1.1" fill="currentColor" />
|
|
<circle cx="10.5" cy="14.5" r="1" fill="currentColor" />
|
|
<circle cx="12" cy="11" r="0.9" fill="currentColor" />
|
|
</svg>
|
|
</button>
|
|
);
|
|
}
|