Add CookieConsentBanner component and integrate into layout.tsx for cookie consent management
This commit is contained in:
128
lawfirm-demos/demo-2/components/CookieConsentBanner.tsx
Normal file
128
lawfirm-demos/demo-2/components/CookieConsentBanner.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
// CookieConsentBanner.tsx
|
||||
'use client';
|
||||
|
||||
import {useEffect, useState} from 'react';
|
||||
|
||||
export default function CookieConsentBanner() {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [stats, setStats] = useState(false);
|
||||
const [personalization, setPersonalization] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const consent = localStorage.getItem('cookie_consent');
|
||||
if (!consent) setVisible(true);
|
||||
|
||||
const show = () => {
|
||||
setVisible(true);
|
||||
};
|
||||
window.addEventListener('show-cookie-banner', show);
|
||||
return () => window.removeEventListener('show-cookie-banner', show);
|
||||
}, []);
|
||||
|
||||
const handleAccept = () => {
|
||||
setLoading(true);
|
||||
setTimeout(() => {
|
||||
localStorage.setItem('cookie_consent', 'true');
|
||||
localStorage.setItem('cookie_stats', stats.toString());
|
||||
localStorage.setItem('cookie_personalization', personalization.toString());
|
||||
setVisible(false);
|
||||
setLoading(false);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const handleAcceptAll = () => {
|
||||
setLoading(true);
|
||||
setStats(true);
|
||||
setPersonalization(true);
|
||||
setTimeout(() => {
|
||||
localStorage.setItem('cookie_consent', 'true');
|
||||
localStorage.setItem('cookie_stats', 'true');
|
||||
localStorage.setItem('cookie_personalization', 'true');
|
||||
setVisible(false);
|
||||
setLoading(false);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const handleDecline = () => {
|
||||
localStorage.setItem('cookie_consent', 'false');
|
||||
localStorage.setItem('cookie_stats', 'false');
|
||||
localStorage.setItem('cookie_personalization', 'false');
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
return visible ? (
|
||||
<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center px-4">
|
||||
<div className="bg-white max-w-2xl w-full rounded-xl shadow-lg overflow-hidden text-sm text-gray-800">
|
||||
<div className="px-6 py-4 border-b border-gray-200">
|
||||
<h2 className="text-lg font-semibold">Wir nutzen Cookies und andere Technologien.</h2>
|
||||
</div>
|
||||
<div className="px-6 py-4 space-y-4 max-h-[60vh] overflow-y-auto">
|
||||
<p>
|
||||
Diese Website nutzt Cookies und vergleichbare Funktionen zur Verarbeitung von
|
||||
Endgeräteinformationen und personenbezogenen Daten. Die Verarbeitung dient der Einbindung von
|
||||
Inhalten, externen Diensten und Elementen Dritter, der statistischen Analyse/Messung, der
|
||||
personalisierten Werbung sowie der Einbindung sozialer Medien.
|
||||
</p>
|
||||
<p>
|
||||
Je nach Funktion werden dabei Daten an Dritte weitergegeben und in Länder außerhalb der EU
|
||||
übertragen, in denen kein angemessenes Datenschutzniveau besteht – z. B. die USA. Ihre
|
||||
Einwilligung ist freiwillig und kann jederzeit über das Symbol unten links widerrufen werden.
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<label className="block">
|
||||
<input type="checkbox" defaultChecked disabled className="mr-2"/>
|
||||
Notwendige Cookies (immer aktiv)
|
||||
</label>
|
||||
<label className="block">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={stats}
|
||||
onChange={(e) => setStats(e.target.checked)}
|
||||
className="mr-2"
|
||||
/>
|
||||
Statistiken (z. B. Besuchertracking)
|
||||
</label>
|
||||
<label className="block">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={personalization}
|
||||
onChange={(e) => setPersonalization(e.target.checked)}
|
||||
className="mr-2"
|
||||
/>
|
||||
Personalisierung (z. B. eingebettete Medien, Google Maps)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 py-4 border-t border-gray-200 flex flex-col sm:flex-row sm:justify-end gap-2">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
onClick={handleDecline}
|
||||
className="px-4 py-2 border rounded text-gray-600 hover:bg-gray-100"
|
||||
>
|
||||
Ablehnen
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAccept}
|
||||
className="px-4 py-2 border rounded text-gray-700 hover:bg-gray-100 disabled:opacity-60"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Speichere ...' : 'Akzeptieren'}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAcceptAll}
|
||||
className="px-4 py-2 bg-red-700 text-white rounded hover:bg-red-800 disabled:opacity-60"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Speichere ...' : 'Alles akzeptieren'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 py-3 border-t border-gray-100 text-xs text-gray-500 flex justify-start gap-4">
|
||||
<a href="/impressum" className="hover:underline">Impressum</a>
|
||||
<a href="/datenschutz" className="hover:underline">Datenschutzerklärung</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
}
|
||||
Reference in New Issue
Block a user