54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { useLanguage } from "@/lib/language-context"
|
|
import { motion, AnimatePresence } from "framer-motion"
|
|
|
|
const CookieConsent = () => {
|
|
const { t } = useLanguage()
|
|
const [isVisible, setIsVisible] = React.useState(false)
|
|
|
|
React.useEffect(() => {
|
|
const consent = localStorage.getItem("cookie-consent")
|
|
if (!consent) {
|
|
setTimeout(() => setIsVisible(true), 2000)
|
|
}
|
|
}, [])
|
|
|
|
const handleAccept = () => {
|
|
localStorage.setItem("cookie-consent", "true")
|
|
setIsVisible(false)
|
|
}
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{isVisible && (
|
|
<motion.div
|
|
initial={{ y: 100, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
exit={{ y: 100, opacity: 0 }}
|
|
className="fixed bottom-6 left-6 right-6 md:left-auto md:right-6 md:w-[400px] bg-white shadow-2xl rounded-3xl p-6 z-[100] border border-slate-100"
|
|
>
|
|
<div className="space-y-4">
|
|
<h4 className="font-bold text-lg">{t.cookie.title}</h4>
|
|
<p className="text-sm text-slate-600 leading-relaxed">
|
|
{t.cookie.description}
|
|
</p>
|
|
<div className="flex gap-3">
|
|
<Button onClick={handleAccept} className="flex-1 rounded-full">
|
|
{t.cookie.accept}
|
|
</Button>
|
|
<Button variant="outline" onClick={() => setIsVisible(false)} className="flex-1 rounded-full">
|
|
{t.cookie.decline}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
)
|
|
}
|
|
|
|
export default CookieConsent
|