124 lines
4.1 KiB
TypeScript
124 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import "./CookieConsent.module.css";
|
|
|
|
export default function CookieConsentBanner() {
|
|
useEffect(() => {
|
|
let mounted = true;
|
|
let idleId: number | undefined;
|
|
let timeoutId: ReturnType<typeof setTimeout> | undefined;
|
|
|
|
const loadConsent = async () => {
|
|
const [cookieConsentModule] = await Promise.all([
|
|
import("vanilla-cookieconsent"),
|
|
import("vanilla-cookieconsent/dist/cookieconsent.css"),
|
|
]);
|
|
|
|
const mod = cookieConsentModule as {
|
|
run?: (config: unknown) => void;
|
|
default?: {
|
|
run?: (config: unknown) => void;
|
|
};
|
|
};
|
|
|
|
const CookieConsent = mod.run ? mod : mod.default;
|
|
|
|
if (!mounted || !CookieConsent?.run) return;
|
|
|
|
CookieConsent.run({
|
|
categories: {
|
|
necessary: {
|
|
enabled: true,
|
|
readOnly: true,
|
|
},
|
|
analytics: {},
|
|
marketing: {},
|
|
},
|
|
language: {
|
|
default: "de",
|
|
translations: {
|
|
de: {
|
|
consentModal: {
|
|
title: "Ihre Privatsphäre ist uns wichtig",
|
|
description:
|
|
"Wir setzen notwendige und optionale Cookies ein. Ihre Auswahl können Sie jederzeit unter <a href='/datenschutz'>Datenschutz</a> ändern.",
|
|
acceptAllBtn: "Alle akzeptieren",
|
|
acceptNecessaryBtn: "Nur notwendige",
|
|
showPreferencesBtn: "Einstellungen anpassen",
|
|
footer:
|
|
"<a href='/impressum'>Impressum</a>" +
|
|
"<a href='/datenschutz'>Datenschutzerklärung</a>",
|
|
},
|
|
preferencesModal: {
|
|
title: "Cookie-Einstellungen",
|
|
acceptAllBtn: "Alle akzeptieren",
|
|
acceptNecessaryBtn: "Nur notwendige",
|
|
savePreferencesBtn: "Auswahl speichern",
|
|
closeIconLabel: "Schließen",
|
|
sections: [
|
|
{
|
|
title: "Ihre Privatsphäre",
|
|
description:
|
|
"Wir setzen Cookies ein, um die Funktionalität unserer Website sicherzustellen und unser Angebot kontinuierlich zu verbessern. Sie entscheiden selbst, welche Kategorien Sie zulassen möchten.",
|
|
},
|
|
{
|
|
title: "Technisch notwendig",
|
|
description:
|
|
"Diese Cookies sind für den reibungslosen Betrieb der Website unbedingt erforderlich und können nicht deaktiviert werden.",
|
|
linkedCategory: "necessary",
|
|
},
|
|
{
|
|
title: "Analyse & Statistik",
|
|
description:
|
|
"Diese Cookies helfen uns zu verstehen, wie Besucher mit unserer Website interagieren.",
|
|
linkedCategory: "analytics",
|
|
},
|
|
{
|
|
title: "Marketing & externe Medien",
|
|
description:
|
|
"Diese Cookies ermöglichen die Einbindung externer Inhalte wie YouTube-Videos, Google Maps, Instagram-, Facebook- und X-Inhalte.",
|
|
linkedCategory: "marketing",
|
|
},
|
|
{
|
|
title: "Weitere Informationen",
|
|
description:
|
|
"Bei Fragen wenden Sie sich bitte über das <a href='/kontakt'>Kontaktformular</a> an uns. Mehr Details finden Sie in unserer <a href='/datenschutz'>Datenschutzerklärung</a>.",
|
|
},
|
|
],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
};
|
|
|
|
if (window.requestIdleCallback) {
|
|
idleId = window.requestIdleCallback(
|
|
() => {
|
|
void loadConsent();
|
|
},
|
|
{ timeout: 2000 },
|
|
);
|
|
} else {
|
|
timeoutId = setTimeout(() => {
|
|
void loadConsent();
|
|
}, 300);
|
|
}
|
|
|
|
return () => {
|
|
mounted = false;
|
|
|
|
if (idleId && window.cancelIdleCallback) {
|
|
window.cancelIdleCallback(idleId);
|
|
}
|
|
|
|
if (timeoutId) {
|
|
clearTimeout(timeoutId);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
return null;
|
|
}
|