feat: Wabenhain Honig-Shop Anwendung

Vollstaendige Next.js/Prisma-E-Commerce-Anwendung fuer eine Imkerei: Shop, Warenkorb, Stripe-Checkout, Kundenkonto mit 2FA, Admin-Bereich (Produkte, Ernten, Chargen, Bestellungen, Gutscheine, admin-editierbare Website-Inhalte), i18n (DE/EN), Rate-Limiting/CSP/Audit-Log-Haertung, PostgreSQL- und MySQL-Unterstuetzung ueber austauschbare Prisma- Treiber-Adapter, Unit-/Komponenten-/E2E-Tests.
2026-08-17 14:30:28 +02:00
1 parent 5c76fcc266
commit c7927f2883
@@ -0,0 +1,83 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { AnimatePresence, motion } from "motion/react";
+import { Button } from "@/components/ui";
+import { useI18n } from "@/i18n/i18n-provider";
+
+export const COOKIE_CONSENT_KEY = "wabenhain-cookie-consent";
+
+type Consent = "all" | "essential";
+
+export function CookieConsentBanner() {
+  const { t } = useI18n();
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    // Liest bewusst erst nach dem Mount aus localStorage (Browser-API, im
+    // SSR-Markup nicht verfuegbar), um einen Hydration-Mismatch zu vermeiden.
+    const stored = window.localStorage.getItem(COOKIE_CONSENT_KEY);
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- externe Browser-Quelle (localStorage) einmalig nach dem Mount synchronisieren
+    if (!stored) setVisible(true);
+  }, []);
+
+  function choose(consent: Consent) {
+    window.localStorage.setItem(COOKIE_CONSENT_KEY, consent);
+    setVisible(false);
+  }
+
+  return (
+    <AnimatePresence>
+      {visible ? (
+        <motion.div
+          initial={{ y: 100, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: 100, opacity: 0 }}
+          transition={{ duration: 0.3 }}
+          role="dialog"
+          aria-label={t.cookieConsent.dialogLabel}
+          className="fixed inset-x-0 bottom-0 z-50 bg-forest text-cream border-t border-cream/20"
+        >
+          <div className="mx-auto max-w-6xl px-6 py-6 flex flex-col md:flex-row md:items-center gap-4">
+            <p className="text-sm text-cream/85 leading-relaxed flex-1">
+              {t.cookieConsent.bannerTextBeforeLink}
+              <Link href="/cookie-richtlinie" className="underline">
+                {t.cookieConsent.policyLinkLabel}
+              </Link>
+              {t.cookieConsent.bannerTextAfterLink}
+            </p>
+            <div className="flex flex-shrink-0 flex-wrap gap-3">
+              <Button
+                variant="secondary"
+                className="!border-cream !text-cream hover:!bg-cream hover:!text-forest whitespace-nowrap"
+                onClick={() => choose("essential")}
+              >
+                {t.cookieConsent.essentialOnly}
+              </Button>
+              <Button className="whitespace-nowrap" onClick={() => choose("all")}>
+                {t.cookieConsent.acceptAll}
+              </Button>
+            </div>
+          </div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  );
+}
+
+/** Erlaubt es, die getroffene Cookie-Auswahl auf der Cookie-Richtlinie-Seite zu widerrufen. */
+export function CookieSettingsButton() {
+  const { t } = useI18n();
+  return (
+    <Button
+      variant="secondary"
+      onClick={() => {
+        window.localStorage.removeItem(COOKIE_CONSENT_KEY);
+        window.location.reload();
+      }}
+    >
+      {t.cookieConsent.changeSettings}
+    </Button>
+  );
+}