70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import { useLanguage } from '@/contexts/LanguageContext';
|
|
|
|
export default function CookieConsent() {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const { t } = useLanguage();
|
|
|
|
useEffect(() => {
|
|
// Check if user has already made a choice
|
|
const consent = localStorage.getItem('cookie_consent');
|
|
if (consent === null) {
|
|
// Small delay to show animation
|
|
const timer = setTimeout(() => setIsVisible(true), 1000);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, []);
|
|
|
|
const handleAccept = () => {
|
|
localStorage.setItem('cookie_consent', 'true');
|
|
setIsVisible(false);
|
|
};
|
|
|
|
const handleDecline = () => {
|
|
localStorage.setItem('cookie_consent', 'false');
|
|
setIsVisible(false);
|
|
};
|
|
|
|
if (!isVisible) return null;
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6 animate-in slide-in-from-bottom-full duration-500">
|
|
<div className="container mx-auto max-w-4xl">
|
|
<div className="bg-white dark:bg-secondary border border-gray-200 dark:border-white/10 rounded-2xl shadow-2xl p-6 md:flex items-center justify-between gap-6">
|
|
<div className="flex items-start gap-4 mb-6 md:mb-0">
|
|
<div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center shrink-0">
|
|
<span className="text-3xl">🍪</span>
|
|
</div>
|
|
<div>
|
|
<p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
|
|
{t('cookie.text')}{' '}
|
|
<Link href="/privacidade" className="text-primary font-bold hover:underline">
|
|
{t('cookie.policy')}
|
|
</Link>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center gap-3 shrink-0">
|
|
<button
|
|
onClick={handleDecline}
|
|
className="px-6 py-2.5 border border-gray-200 dark:border-white/10 text-gray-600 dark:text-gray-300 rounded-lg font-bold hover:bg-gray-50 dark:hover:bg-white/5 transition-colors text-sm cursor-pointer"
|
|
>
|
|
{t('cookie.decline')}
|
|
</button>
|
|
<button
|
|
onClick={handleAccept}
|
|
className="px-6 py-2.5 bg-primary text-white rounded-lg font-bold hover-primary transition-colors text-sm shadow-lg shadow-primary/20 cursor-pointer"
|
|
>
|
|
{t('cookie.accept')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|