90 lines
3.4 KiB
TypeScript
90 lines
3.4 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useEffect } from 'react';
|
||
|
||
interface CookieBannerProps {
|
||
onAccept?: () => void;
|
||
onDecline?: () => void;
|
||
}
|
||
|
||
export const CookieBanner: React.FC<CookieBannerProps> = ({ onAccept, onDecline }) => {
|
||
const [isVisible, setIsVisible] = useState(false);
|
||
|
||
useEffect(() => {
|
||
// Check if user has already made a choice
|
||
const consent = localStorage.getItem('cookie-consent');
|
||
if (!consent) {
|
||
// Small delay for better UX
|
||
setTimeout(() => setIsVisible(true), 1500);
|
||
}
|
||
}, []);
|
||
|
||
const handleAccept = () => {
|
||
localStorage.setItem('cookie-consent', 'accepted');
|
||
setIsVisible(false);
|
||
onAccept?.();
|
||
};
|
||
|
||
const handleDecline = () => {
|
||
localStorage.setItem('cookie-consent', 'declined');
|
||
setIsVisible(false);
|
||
onDecline?.();
|
||
};
|
||
|
||
if (!isVisible) return null;
|
||
|
||
return (
|
||
<div className="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6">
|
||
<div className="max-w-4xl mx-auto bg-zsl-card/95 backdrop-blur-md border border-zsl-primary/20 rounded-2xl p-6 shadow-2xl shadow-black/50">
|
||
<div className="flex flex-col md:flex-row items-start md:items-center gap-4">
|
||
{/* Icon */}
|
||
<div className="w-12 h-12 rounded-xl bg-zsl-primary/10 flex items-center justify-center shrink-0">
|
||
<svg className="w-6 h-6 text-zsl-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||
</svg>
|
||
</div>
|
||
|
||
{/* Text */}
|
||
<div className="flex-1">
|
||
<h3 className="font-semibold text-white mb-1">🍪 Çerez Kullanımı & KVKK</h3>
|
||
<p className="text-sm text-zsl-muted leading-relaxed">
|
||
Web sitemizde deneyiminizi iyileştirmek için çerezler kullanıyoruz.
|
||
Kişisel verileriniz 6698 sayılı KVKK kapsamında korunmaktadır.
|
||
Devam ederek{' '}
|
||
<a href="#" className="text-zsl-primary hover:underline">Gizlilik Politikamızı</a>
|
||
{' '}kabul etmiş olursunuz.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Buttons */}
|
||
<div className="flex gap-3 shrink-0 w-full md:w-auto">
|
||
<button
|
||
onClick={handleDecline}
|
||
className="flex-1 md:flex-none px-5 py-2.5 text-sm font-medium text-zsl-muted border border-zsl-primary/20 rounded-lg hover:border-zsl-primary/40 hover:text-white transition-all duration-300"
|
||
>
|
||
Reddet
|
||
</button>
|
||
<button
|
||
onClick={handleAccept}
|
||
className="flex-1 md:flex-none px-5 py-2.5 text-sm font-medium bg-zsl-primary text-zsl-bg rounded-lg hover:bg-zsl-primary/90 transition-all duration-300"
|
||
>
|
||
Kabul Et
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Close button */}
|
||
<button
|
||
onClick={handleDecline}
|
||
className="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center text-zsl-muted hover:text-white hover:bg-zsl-primary/10 transition-all duration-300"
|
||
aria-label="Kapat"
|
||
>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|