119 lines
4.2 KiB
TypeScript
119 lines
4.2 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import { Button } from '@/components/ui/Button';
|
|
|
|
export default function CookieBanner() {
|
|
const [showBanner, setShowBanner] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Check if user has already made a choice
|
|
const cookieConsent = localStorage.getItem('cookieConsent');
|
|
if (!cookieConsent) {
|
|
// Show banner after a short delay for better UX
|
|
const timer = setTimeout(() => {
|
|
setShowBanner(true);
|
|
}, 1000);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, []);
|
|
|
|
const handleAccept = () => {
|
|
localStorage.setItem('cookieConsent', 'accepted');
|
|
setShowBanner(false);
|
|
// Reload page to initialize PostHog
|
|
window.location.reload();
|
|
};
|
|
|
|
const handleDecline = () => {
|
|
localStorage.setItem('cookieConsent', 'declined');
|
|
setShowBanner(false);
|
|
};
|
|
|
|
return (
|
|
<div suppressHydrationWarning>
|
|
{showBanner && (
|
|
<>
|
|
{/* Cookie Banner - Bottom Left Corner */}
|
|
<div className="fixed bottom-4 left-4 z-50 max-w-md animate-slide-in">
|
|
<div className="bg-white rounded-lg shadow-2xl border border-gray-200 p-6">
|
|
<div className="flex items-start gap-3 mb-4">
|
|
<div className="flex-shrink-0">
|
|
<svg className="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-base font-semibold text-gray-900 mb-2">
|
|
We use cookies
|
|
</h3>
|
|
<p className="text-gray-600 text-sm leading-relaxed mb-3">
|
|
We use essential cookies for authentication and analytics cookies to improve your experience.{' '}
|
|
<Link href="/privacy" className="text-primary-600 hover:text-primary-700 font-medium underline">
|
|
Learn more about our privacy policy
|
|
</Link>
|
|
</p>
|
|
|
|
{/* Cookie Categories */}
|
|
<div className="space-y-1.5 mb-4">
|
|
<div className="flex items-center text-xs">
|
|
<svg className="w-3.5 h-3.5 text-success-600 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
|
</svg>
|
|
<span className="text-gray-700"><strong>Essential:</strong> Authentication, CSRF protection</span>
|
|
</div>
|
|
<div className="flex items-center text-xs">
|
|
<svg className="w-3.5 h-3.5 text-primary-600 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
|
</svg>
|
|
<span className="text-gray-700"><strong>Analytics:</strong> PostHog for website analytics</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleDecline}
|
|
size="sm"
|
|
className="flex-1"
|
|
>
|
|
Decline
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
onClick={handleAccept}
|
|
size="sm"
|
|
className="flex-1"
|
|
>
|
|
Accept All
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
@keyframes slide-in {
|
|
from {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-slide-in {
|
|
animation: slide-in 0.4s ease-out;
|
|
}
|
|
`}</style>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|