98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
'use client'
|
||
|
||
import React, { useState, useEffect } from 'react'
|
||
import Link from 'next/link'
|
||
import { useParams } from 'next/navigation'
|
||
import { Cookie, X, ShieldCheck } from 'lucide-react'
|
||
|
||
export default function CookieBanner() {
|
||
const [mounted, setMounted] = useState(false)
|
||
const [visible, setVisible] = useState(false)
|
||
const params = useParams()
|
||
const locale = (params?.locale as string) || 'tr'
|
||
|
||
useEffect(() => {
|
||
setMounted(true)
|
||
const consent = localStorage.getItem('ayris_cookie_consent')
|
||
if (!consent) {
|
||
// Sayfa yüklendikten kısa bir süre sonra pürüzsüzce aç
|
||
const timer = setTimeout(() => {
|
||
setVisible(true)
|
||
}, 1000)
|
||
return () => clearTimeout(timer)
|
||
}
|
||
}, [])
|
||
|
||
const handleAcceptAll = () => {
|
||
localStorage.setItem('ayris_cookie_consent', 'accepted_all')
|
||
setVisible(false)
|
||
}
|
||
|
||
const handleAcceptEssential = () => {
|
||
localStorage.setItem('ayris_cookie_consent', 'essential_only')
|
||
setVisible(false)
|
||
}
|
||
|
||
if (!mounted || !visible) return null
|
||
|
||
return (
|
||
<aside
|
||
aria-label="Çerez ve Gizlilik Bildirimi"
|
||
role="region"
|
||
className="fixed bottom-4 left-4 right-4 z-50 mx-auto max-w-[540px] animate-in fade-in slide-in-from-bottom-5 duration-300 sm:bottom-6 sm:right-6 sm:left-auto"
|
||
>
|
||
<div className="rounded-2xl border border-zinc-200/90 bg-white/95 p-5 shadow-[0_20px_50px_-15px_rgba(24,24,27,0.2)] backdrop-blur-md">
|
||
<div className="flex items-start gap-3.5">
|
||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-[#FDEEEC] text-[#B8140F]">
|
||
<Cookie size={18} strokeWidth={2.2} aria-hidden="true" />
|
||
</div>
|
||
|
||
<div className="flex-1">
|
||
<div className="flex items-center justify-between gap-2">
|
||
<h3 className="text-sm font-bold text-zinc-950 flex items-center gap-1.5">
|
||
Çerez ve Veri Politikası
|
||
</h3>
|
||
<button
|
||
type="button"
|
||
onClick={handleAcceptEssential}
|
||
aria-label="Bildirimi Kapat"
|
||
className="rounded-lg p-1 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-700 transition-colors"
|
||
>
|
||
<X size={15} />
|
||
</button>
|
||
</div>
|
||
|
||
<p className="mt-1.5 text-xs leading-relaxed text-zinc-600">
|
||
Sitemizde gezinme deneyiminizi iyileştirmek, temel işlevleri sunmak ve güvenliği sağlamak amacıyla çerezler kullanılmaktadır. Ayrıntılı bilgi için{' '}
|
||
<Link
|
||
href={`/${locale}/privacy`}
|
||
className="font-semibold text-zinc-900 underline underline-offset-2 hover:text-[#E61919]"
|
||
>
|
||
Gizlilik Politikası
|
||
</Link>
|
||
'nı inceleyebilirsiniz.
|
||
</p>
|
||
|
||
<div className="mt-4 flex flex-wrap items-center gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={handleAcceptAll}
|
||
className="flex-1 rounded-full bg-[#E61919] px-4 py-2 text-xs font-bold text-white shadow-sm transition-all hover:bg-[#B8140F] active:scale-[0.98] sm:flex-initial"
|
||
>
|
||
Tümünü Kabul Et
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={handleAcceptEssential}
|
||
className="flex-1 rounded-full border border-zinc-200 bg-white px-3.5 py-2 text-xs font-semibold text-zinc-700 transition-all hover:bg-zinc-50 hover:text-zinc-950 active:scale-[0.98] sm:flex-initial"
|
||
>
|
||
Yalnızca Zorunlular
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
)
|
||
}
|