feat(web): add CookieBanner component

2026-08-26 15:13:40 +02:00
parent a23215ad6b
commit c116a9f525
2 changed files with 116 additions and 0 deletions
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { useTranslation } from '../i18n';
+import './CookieBanner.css';
+
+function CookieBanner({ onConsent, onPrivacyClick }) {
+  const { t } = useTranslation();
+  const [categories, setCategories] = useState({
+    analytics: false,
+    preferences: false,
+    health_data: false,
+  });
+
+  function toggleCategory(cat) {
+    setCategories(prev => ({ ...prev, [cat]: !prev[cat] }));
+  }
+
+  function handleAcceptAll() {
+    onConsent({ essential: true, analytics: true, preferences: true, health_data: true });
+  }
+
+  function handleRejectOptional() {
+    onConsent({ essential: true, analytics: false, preferences: false, health_data: false });
+  }
+
+  function handleSave() {
+    onConsent({ essential: true, ...categories });
+  }
+
+  return (
+    <div className="cookie-banner-overlay">
+      <div className="cookie-banner">
+        <h2 className="cookie-banner-title">{t('cookie_banner.title')}</h2>
+        <p className="cookie-banner-desc">{t('cookie_banner.description')}</p>
+        <div className="cookie-categories">
+          <div className="cookie-category">
+            <div className="cookie-category-info">
+              <span className="cookie-category-name">{t('cookie_banner.category.essential')}</span>
+              <span className="cookie-category-desc">{t('cookie_banner.category.essential_desc')}</span>
+            </div>
+            <div className="cookie-toggle cookie-toggle--locked">
+              <span className="cookie-toggle-track"><span className="cookie-toggle-thumb" /></span>
+            </div>
+          </div>
+          {['analytics', 'preferences', 'health_data'].map(cat => (
+            <div className="cookie-category" key={cat}>
+              <div className="cookie-category-info">
+                <span className="cookie-category-name">{t(`cookie_banner.category.${cat}`)}</span>
+                <span className="cookie-category-desc">{t(`cookie_banner.category.${cat}_desc`)}</span>
+              </div>
+              <button type="button" className={`cookie-toggle ${categories[cat] ? 'cookie-toggle--on' : ''}`} onClick={() => toggleCategory(cat)} aria-pressed={categories[cat]}>
+                <span className="cookie-toggle-track"><span className="cookie-toggle-thumb" /></span>
+              </button>
+            </div>
+          ))}
+        </div>
+        <div className="cookie-banner-actions">
+          <button type="button" className="cookie-btn cookie-btn--primary" onClick={handleAcceptAll}>{t('cookie_banner.accept_all')}</button>
+          <button type="button" className="cookie-btn cookie-btn--secondary" onClick={handleRejectOptional}>{t('cookie_banner.reject_optional')}</button>
+          <button type="button" className="cookie-btn cookie-btn--tertiary" onClick={handleSave}>{t('cookie_banner.save')}</button>
+        </div>
+        <button type="button" className="cookie-more-info" onClick={onPrivacyClick}>{t('cookie_banner.more_info')} →</button>
+      </div>
+    </div>
+  );
+}
+
+export default CookieBanner;