Versão inicial do site Avanzato
This commit is contained in:
@@ -0,0 +1,222 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Cookie, X, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
|
||||
interface CookiePreferences {
|
||||
necessary: boolean;
|
||||
analytics: boolean;
|
||||
marketing: boolean;
|
||||
}
|
||||
|
||||
const CookieConsent = () => {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [showDetails, setShowDetails] = useState(false);
|
||||
const [preferences, setPreferences] = useState<CookiePreferences>({
|
||||
necessary: true,
|
||||
analytics: false,
|
||||
marketing: false,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
// Check if user already consented
|
||||
const consent = localStorage.getItem('cookie-consent');
|
||||
if (!consent) {
|
||||
// Show after 2 seconds
|
||||
const timer = setTimeout(() => setIsVisible(true), 2000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleAcceptAll = () => {
|
||||
const allAccepted: CookiePreferences = {
|
||||
necessary: true,
|
||||
analytics: true,
|
||||
marketing: true,
|
||||
};
|
||||
setPreferences(allAccepted);
|
||||
saveConsent(allAccepted);
|
||||
};
|
||||
|
||||
const handleAcceptSelected = () => {
|
||||
saveConsent(preferences);
|
||||
};
|
||||
|
||||
const handleRejectAll = () => {
|
||||
const onlyNecessary: CookiePreferences = {
|
||||
necessary: true,
|
||||
analytics: false,
|
||||
marketing: false,
|
||||
};
|
||||
setPreferences(onlyNecessary);
|
||||
saveConsent(onlyNecessary);
|
||||
};
|
||||
|
||||
const saveConsent = (prefs: CookiePreferences) => {
|
||||
localStorage.setItem('cookie-consent', JSON.stringify(prefs));
|
||||
setIsVisible(false);
|
||||
|
||||
// Enable/disable tracking based on consent
|
||||
if (prefs.analytics) {
|
||||
// Enable GA4
|
||||
(window as any).gtag?.('consent', 'update', {
|
||||
analytics_storage: 'granted',
|
||||
});
|
||||
} else {
|
||||
(window as any).gtag?.('consent', 'update', {
|
||||
analytics_storage: 'denied',
|
||||
});
|
||||
}
|
||||
|
||||
if (prefs.marketing) {
|
||||
// Enable Google Ads
|
||||
(window as any).gtag?.('consent', 'update', {
|
||||
ad_storage: 'granted',
|
||||
ad_user_data: 'granted',
|
||||
ad_personalization: 'granted',
|
||||
});
|
||||
} else {
|
||||
(window as any).gtag?.('consent', 'update', {
|
||||
ad_storage: 'denied',
|
||||
ad_user_data: 'denied',
|
||||
ad_personalization: 'denied',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const togglePreference = (key: keyof CookiePreferences) => {
|
||||
if (key === 'necessary') return; // Always required
|
||||
setPreferences((prev) => ({ ...prev, [key]: !prev[key] }));
|
||||
};
|
||||
|
||||
if (!isVisible) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 left-0 right-0 z-[100] bg-[#1a1a1a] border-t border-white/10 shadow-2xl">
|
||||
<div className="container-custom py-4 md:py-6">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center gap-4">
|
||||
{/* Icon */}
|
||||
<div className="hidden md:flex w-12 h-12 rounded-xl bg-[#cbf400]/10 items-center justify-center flex-shrink-0">
|
||||
<Cookie className="w-6 h-6 text-[#cbf400]" />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1">
|
||||
<p className="text-white font-semibold mb-1">
|
||||
Este site utiliza cookies
|
||||
</p>
|
||||
<p className="text-gray-400 text-sm">
|
||||
Utilizamos cookies para melhorar sua experiencia, analisar trafego e personalizar conteudo.
|
||||
Voce pode aceitar todos ou gerenciar suas preferencias.{' '}
|
||||
<a href="#/privacidade" className="text-[#cbf400] hover:underline">
|
||||
Politica de Privacidade
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-2 flex-shrink-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowDetails(!showDetails)}
|
||||
className="border-white/20 text-gray-300 hover:bg-white/10"
|
||||
>
|
||||
{showDetails ? (
|
||||
<ChevronUp className="w-4 h-4 mr-1" />
|
||||
) : (
|
||||
<ChevronDown className="w-4 h-4 mr-1" />
|
||||
)}
|
||||
Personalizar
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={handleRejectAll}
|
||||
className="border-white/20 text-gray-300 hover:bg-white/10"
|
||||
>
|
||||
<X className="w-4 h-4 mr-1" />
|
||||
Recusar
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleAcceptAll}
|
||||
className="bg-[#cbf400] text-[#0e0e0e] hover:bg-[#b8e000] font-semibold"
|
||||
>
|
||||
Aceitar Todos
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Details Panel */}
|
||||
{showDetails && (
|
||||
<div className="mt-4 pt-4 border-t border-white/10 space-y-3">
|
||||
{[
|
||||
{
|
||||
key: 'necessary' as const,
|
||||
title: 'Cookies Necessarios',
|
||||
description: 'Essenciais para o funcionamento do site. Nao podem ser desativados.',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
key: 'analytics' as const,
|
||||
title: 'Cookies de Analytics',
|
||||
description: 'Google Analytics - Ajuda a entender como voce usa o site.',
|
||||
required: false,
|
||||
},
|
||||
{
|
||||
key: 'marketing' as const,
|
||||
title: 'Cookies de Marketing',
|
||||
description: 'Google Ads - Permite anuncios relevantes e remarketing.',
|
||||
required: false,
|
||||
},
|
||||
].map((cookie) => (
|
||||
<div
|
||||
key={cookie.key}
|
||||
className="flex items-center justify-between p-3 bg-[#0e0e0e] rounded-xl"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<p className="text-white font-medium text-sm">{cookie.title}</p>
|
||||
<p className="text-gray-500 text-xs">{cookie.description}</p>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer ml-4">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferences[cookie.key]}
|
||||
onChange={() => togglePreference(cookie.key)}
|
||||
disabled={cookie.required}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div
|
||||
className={`w-11 h-6 rounded-full peer transition-colors ${
|
||||
preferences[cookie.key]
|
||||
? 'bg-[#cbf400]'
|
||||
: 'bg-gray-600'
|
||||
} ${cookie.required ? 'opacity-50' : ''}`}
|
||||
>
|
||||
<div
|
||||
className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform ${
|
||||
preferences[cookie.key] ? 'translate-x-5' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleAcceptSelected}
|
||||
className="bg-[#cbf400] text-[#0e0e0e] hover:bg-[#b8e000] font-semibold"
|
||||
>
|
||||
Salvar Preferencias
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CookieConsent;
|
||||
Reference in New Issue
Block a user