77 lines
3.2 KiB
TypeScript
77 lines
3.2 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { motion, AnimatePresence } from 'motion/react';
|
|
import { X } from 'lucide-react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
export function CookieBanner() {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// delay showing banner slightly for better UX
|
|
const timer = setTimeout(() => {
|
|
const consent = localStorage.getItem('cookie-consent');
|
|
if (!consent) {
|
|
setIsVisible(true);
|
|
}
|
|
}, 1500);
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
const acceptCookies = () => {
|
|
localStorage.setItem('cookie-consent', 'accepted');
|
|
setIsVisible(false);
|
|
};
|
|
|
|
const declineCookies = () => {
|
|
localStorage.setItem('cookie-consent', 'declined');
|
|
setIsVisible(false);
|
|
};
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{isVisible && (
|
|
<motion.div
|
|
initial={{ y: 100, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
exit={{ y: 100, opacity: 0 }}
|
|
transition={{ duration: 0.4, ease: "easeOut" }}
|
|
className="fixed bottom-0 left-0 right-0 z-[100] p-4 md:p-6 pointer-events-none flex justify-center"
|
|
>
|
|
<div className="bg-stone-900 border border-stone-800 text-stone-300 w-full max-w-5xl rounded-3xl p-6 shadow-2xl pointer-events-auto flex flex-col md:flex-row items-center gap-6 md:gap-12 justify-between">
|
|
<div className="flex flex-col gap-2 flex-grow">
|
|
<h4 className="text-white font-medium text-lg flex items-center gap-2">
|
|
Nós valorizamos sua privacidade
|
|
</h4>
|
|
<p className="text-sm font-light text-stone-400 leading-relaxed">
|
|
Utilizamos cookies e tecnologias semelhantes (incluindo pixels de rastreamento) para melhorar sua experiência de navegação,
|
|
analisar o tráfego do site e personalizar nosso conteúdo e anúncios. Ao clicar em "Aceitar",
|
|
você concorda com nossa <Link to="/privacidade" className="text-primary-300 hover:text-white transition-colors hover:underline">Política de Privacidade</Link>.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3 w-full md:w-auto shrink-0 justify-end mt-4 md:mt-0">
|
|
<button
|
|
onClick={declineCookies}
|
|
className="px-5 py-3 text-sm font-medium text-stone-400 hover:text-white transition-colors"
|
|
>
|
|
Recusar
|
|
</button>
|
|
<button
|
|
onClick={acceptCookies}
|
|
className="px-8 py-3 bg-white hover:bg-stone-200 text-stone-900 text-sm font-medium rounded-full transition-colors whitespace-nowrap active:scale-95"
|
|
>
|
|
Aceitar Cookies
|
|
</button>
|
|
<button
|
|
onClick={declineCookies}
|
|
className="p-2.5 text-stone-500 hover:text-white transition-colors ml-2 hidden md:flex items-center justify-center rounded-full hover:bg-stone-800"
|
|
aria-label="Fechar"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|