75 lines
3.0 KiB
TypeScript
75 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import { X, Cookie } from 'lucide-react';
|
|
|
|
const CookieBanner = () => {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Check if the user has already consented
|
|
const consent = localStorage.getItem('cookie-consent');
|
|
if (!consent) {
|
|
// Small delay for better UX
|
|
const timer = setTimeout(() => {
|
|
setIsVisible(true);
|
|
}, 1500);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, []);
|
|
|
|
const handleConsent = (level: 'all' | 'essential') => {
|
|
localStorage.setItem('cookie-consent', level);
|
|
setIsVisible(false);
|
|
};
|
|
|
|
if (!isVisible) return null;
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 z-[100] p-4 md:p-6 pointer-events-none">
|
|
<div className="max-w-4xl mx-auto bg-gray-900 text-white rounded-2xl shadow-2xl border border-gray-800 p-5 md:p-6 pointer-events-auto transform transition-all duration-500 ease-in-out animate-in slide-in-from-bottom-10">
|
|
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
|
|
<div className="flex items-start gap-4">
|
|
<div className="bg-brand-500/10 p-2 rounded-lg shrink-0">
|
|
<Cookie className="w-6 h-6 text-brand-500" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-bold mb-1">Nous respectons votre vie privée</h3>
|
|
<p className="text-sm text-gray-400 leading-relaxed">
|
|
Afrohub utilise des cookies pour améliorer votre expérience, analyser le trafic et personnaliser le contenu.
|
|
Certains sont essentiels, d'autres nous aident à grandir avec vous.
|
|
Consultez nos <Link href="/cgu" className="text-brand-500 hover:underline">CGU</Link> pour en savoir plus.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-3 shrink-0 w-full md:w-auto">
|
|
<button
|
|
onClick={() => handleConsent('essential')}
|
|
className="flex-1 md:flex-none px-5 py-2.5 text-sm font-medium text-gray-300 hover:text-white border border-gray-700 hover:border-gray-500 rounded-xl transition-all"
|
|
>
|
|
Uniquement essentiels
|
|
</button>
|
|
<button
|
|
onClick={() => handleConsent('all')}
|
|
className="flex-1 md:flex-none px-5 py-2.5 text-sm font-medium bg-brand-500 hover:bg-brand-600 text-white rounded-xl shadow-lg shadow-brand-500/20 transition-all active:scale-95"
|
|
>
|
|
Tout accepter
|
|
</button>
|
|
<button
|
|
onClick={() => setIsVisible(false)}
|
|
className="absolute top-4 right-4 text-gray-500 hover:text-white transition-colors p-1"
|
|
aria-label="Fermer"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CookieBanner;
|