From cdac942fcab7d2fb4ae74fcf45eb7c196a48499c Mon Sep 17 00:00:00 2001
From: Thatsaphorn Atchariyaphap <thatsaphorn@outlook.de>
Date: Thu, 26 Jun 2025 10:30:49 +0900
Subject: [PATCH] Add `CookieConsentBanner` component and integrate into
 `layout.tsx` for cookie consent management

---
 lawfirm-demos/demo-2/app/layout.tsx           |   2 +
 .../demo-2/components/CookieConsentBanner.tsx | 128 ++++++++++++++++++
 2 files changed, 130 insertions(+)
 create mode 100644 lawfirm-demos/demo-2/components/CookieConsentBanner.tsx

diff --git a/lawfirm-demos/demo-2/app/layout.tsx b/lawfirm-demos/demo-2/app/layout.tsx
index 52365e2..97a12ce 100644
--- a/lawfirm-demos/demo-2/app/layout.tsx
+++ b/lawfirm-demos/demo-2/app/layout.tsx
@@ -4,6 +4,7 @@ import "./globals.css";
 import Navbar from "@/components/Navbar";
 import React from "react";
 import Footer from "@/components/Footer";
+import CookieConsentBanner from "@/components/CookieConsentBanner";
 
 const geistSans = Geist({
     variable: "--font-geist-sans",
@@ -59,6 +60,7 @@ export default function RootLayout({
         <Navbar/>
         {children}
         <Footer/>
+        <CookieConsentBanner/>
         </body>
         </html>
     );
diff --git a/lawfirm-demos/demo-2/components/CookieConsentBanner.tsx b/lawfirm-demos/demo-2/components/CookieConsentBanner.tsx
new file mode 100644
index 0000000..4e327f9
--- /dev/null
+++ b/lawfirm-demos/demo-2/components/CookieConsentBanner.tsx
@@ -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;
+}
\ No newline at end of file