Frank Meeuwsen
c4ee40b4b3
AVG-conform privacybeleid met Umami analytics en Google Fonts vermelding. Algemene voorwaarden met 14 artikelen inclusief herroepingsrecht-uitzondering (art. 6:230p lid 1 sub l BW) en getrapt annuleringsbeleid. CookieBanner component met localStorage persistentie. FAQ uitgebreid met annuleringsvraag. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
72 lines
2.2 KiB
JavaScript
72 lines
2.2 KiB
JavaScript
/**
|
|
* CookieBanner.jsx - Simpele cookiebanner/analytics-melding
|
|
*
|
|
* Informeert bezoekers over het gebruik van Umami analytics.
|
|
* Slaat voorkeur op in localStorage zodat de banner maar 1x verschijnt.
|
|
*/
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
const STORAGE_KEY = 'cookie-banner-dismissed';
|
|
|
|
function CookieBanner() {
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
// Check bij laden of de banner al eerder is weggeklikt
|
|
useEffect(() => {
|
|
const dismissed = localStorage.getItem(STORAGE_KEY);
|
|
if (!dismissed) {
|
|
setVisible(true);
|
|
}
|
|
}, []);
|
|
|
|
const dismiss = () => {
|
|
localStorage.setItem(STORAGE_KEY, 'true');
|
|
setVisible(false);
|
|
};
|
|
|
|
if (!visible) return null;
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 z-50 p-4 sm:p-6">
|
|
<div className="max-w-3xl mx-auto bg-warm-900 text-warm-200 rounded-xl shadow-lg border border-warm-700 p-4 sm:p-5">
|
|
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
|
|
{/* Tekst */}
|
|
<div className="flex-1 text-sm leading-relaxed">
|
|
<p>
|
|
Deze website gebruikt{' '}
|
|
<a
|
|
href="https://umami.is"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-coral-400 hover:text-coral-300 underline"
|
|
>
|
|
Umami
|
|
</a>
|
|
{' '}voor anonieme bezoekersstatistieken. Er worden geen cookies
|
|
geplaatst voor tracking en er worden geen persoonsgegevens
|
|
gedeeld met derden.{' '}
|
|
<Link
|
|
to="/privacy"
|
|
className="text-coral-400 hover:text-coral-300 underline"
|
|
>
|
|
Meer info
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Knop */}
|
|
<button
|
|
onClick={dismiss}
|
|
className="flex-shrink-0 px-5 py-2 bg-coral-500 text-white text-sm font-semibold rounded-lg hover:bg-coral-600 active:bg-coral-700 transition-colors"
|
|
>
|
|
Begrepen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CookieBanner;
|