73 lines
3.2 KiB
TypeScript
73 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { X, ShieldCheck } from 'lucide-react';
|
|
|
|
export const CookieBanner = () => {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const consent = localStorage.getItem('cookie-consent');
|
|
if (!consent) {
|
|
setIsVisible(true);
|
|
}
|
|
}, []);
|
|
|
|
const handleAccept = () => {
|
|
localStorage.setItem('cookie-consent', 'accepted');
|
|
setIsVisible(false);
|
|
// Dispatch an event so Analytics component can react immediately without refresh
|
|
window.dispatchEvent(new Event('cookie-consent-updated'));
|
|
};
|
|
|
|
const handleDecline = () => {
|
|
localStorage.setItem('cookie-consent', 'declined');
|
|
setIsVisible(false);
|
|
window.dispatchEvent(new Event('cookie-consent-updated'));
|
|
};
|
|
|
|
if (!isVisible) return null;
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 z-[100] p-4 md:p-6 bg-slate-900/95 backdrop-blur shadow-2xl border-t border-slate-700/50 transform transition-transform duration-500 ease-out translate-y-0">
|
|
<div className="max-w-7xl mx-auto flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-3 bg-blue-500/20 text-blue-400 rounded-full shrink-0">
|
|
<ShieldCheck size={24} />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-white font-bold text-lg mb-1">
|
|
Nous respectons votre vie privée
|
|
</h3>
|
|
<p className="text-slate-300 text-sm leading-relaxed max-w-3xl">
|
|
Nous utilisons des cookies (via Umami Analytics) exclusivement pour analyser le trafic de manière anonymisée et améliorer votre expérience sur l'application. Aucun parcours n'est lié à votre identité.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row w-full md:w-auto items-center gap-3 shrink-0">
|
|
<button
|
|
onClick={handleDecline}
|
|
className="w-full sm:w-auto px-6 py-2.5 rounded-xl border border-slate-600 text-slate-300 font-semibold hover:bg-slate-800 transition-colors text-sm"
|
|
>
|
|
Continuer sans accepter
|
|
</button>
|
|
<button
|
|
onClick={handleAccept}
|
|
className="w-full sm:w-auto px-6 py-2.5 rounded-xl bg-blue-600 text-white font-bold shadow-lg shadow-blue-600/20 hover:bg-blue-500 hover:-translate-y-0.5 transition-all text-sm"
|
|
>
|
|
Accepter
|
|
</button>
|
|
<button
|
|
onClick={() => setIsVisible(false)}
|
|
className="absolute top-4 right-4 md:hidden text-slate-400 p-2"
|
|
aria-label="Fermer"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|