Add cookie consent banner to website for user agreement
Implement a new cookie consent component that appears after a delay and is stored in local storage upon acceptance, ensuring it doesn't reappear. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: e300760d-9835-4706-a404-021d684580a1 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/jdAEdU5 Replit-Helium-Checkpoint-Created: true
This commit is contained in:
parent
724f34c74b
commit
287eec12f3
BIN
attached_assets/image_1772624103161.png
Normal file
BIN
attached_assets/image_1772624103161.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 756 KiB |
@ -12,6 +12,7 @@ import GalleryPageWrapper from "@/pages/gallery";
|
|||||||
import HoroscopePage from "@/pages/horoscope";
|
import HoroscopePage from "@/pages/horoscope";
|
||||||
import RecipesPage from "@/pages/recipes";
|
import RecipesPage from "@/pages/recipes";
|
||||||
import SearchPage from "@/pages/search";
|
import SearchPage from "@/pages/search";
|
||||||
|
import CookieConsent from "@/components/cookie-consent";
|
||||||
|
|
||||||
function Router() {
|
function Router() {
|
||||||
return (
|
return (
|
||||||
|
|||||||
54
client/src/components/cookie-consent.tsx
Normal file
54
client/src/components/cookie-consent.tsx
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import { X } from "lucide-react";
|
||||||
|
|
||||||
|
const CONSENT_KEY = "folx_cookie_consent";
|
||||||
|
|
||||||
|
export default function CookieConsent() {
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const consent = localStorage.getItem(CONSENT_KEY);
|
||||||
|
if (!consent) {
|
||||||
|
const timer = setTimeout(() => setVisible(true), 1500);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const accept = () => {
|
||||||
|
localStorage.setItem(CONSENT_KEY, "accepted");
|
||||||
|
setVisible(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!visible) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="fixed bottom-0 left-0 right-0 z-[9999] bg-card border-t border-card-border shadow-2xl"
|
||||||
|
data-testid="cookie-consent-banner"
|
||||||
|
>
|
||||||
|
<div className="max-w-4xl mx-auto px-4 py-4 flex flex-col sm:flex-row items-start sm:items-center gap-3">
|
||||||
|
<div className="flex-1 text-sm text-card-foreground">
|
||||||
|
Diese Website verwendet Cookies und Google-Dienste, um Ihnen das bestmögliche
|
||||||
|
Erlebnis zu bieten. Mit der Nutzung dieser Website stimmen Sie der Verwendung
|
||||||
|
von Cookies zu.
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 flex-shrink-0">
|
||||||
|
<button
|
||||||
|
onClick={accept}
|
||||||
|
className="px-5 py-2 bg-primary text-primary-foreground text-sm font-medium rounded-md hover:bg-primary/90 transition-colors"
|
||||||
|
data-testid="button-accept-cookies"
|
||||||
|
>
|
||||||
|
Akzeptieren
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={accept}
|
||||||
|
className="p-1.5 text-muted-foreground hover:text-foreground transition-colors"
|
||||||
|
data-testid="button-close-cookies"
|
||||||
|
>
|
||||||
|
<X className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user