67 lines
2.8 KiB
TypeScript
67 lines
2.8 KiB
TypeScript
'use client'
|
|
import { useEffect, useState } from 'react'
|
|
import posthog from 'posthog-js'
|
|
import { Button } from '@/components/ui/button'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
import Link from 'next/link'
|
|
import { Cookie } from 'lucide-react'
|
|
|
|
export function CookieBanner() {
|
|
const [show, setShow] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const optedIn = posthog.has_opted_in_capturing()
|
|
const optedOut = posthog.has_opted_out_capturing()
|
|
|
|
if (!optedIn && !optedOut) {
|
|
setShow(true)
|
|
}
|
|
}, [])
|
|
|
|
const handleAccept = () => {
|
|
posthog.opt_in_capturing()
|
|
setShow(false)
|
|
}
|
|
|
|
const handleDecline = () => {
|
|
posthog.opt_out_capturing()
|
|
setShow(false)
|
|
}
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{show && (
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.9, y: 20 }}
|
|
className="fixed bottom-4 right-4 z-[100] max-w-sm w-full p-4"
|
|
>
|
|
<div className="rounded-xl border border-border bg-background/95 p-6 shadow-2xl backdrop-blur-xl supports-[backdrop-filter]:bg-background/60">
|
|
<div className="flex items-start gap-4">
|
|
<div className="rounded-full bg-primary/10 p-2 text-primary">
|
|
<Cookie className="h-6 w-6" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-lg font-semibold text-foreground mb-2">We value your privacy</h3>
|
|
<p className="text-sm text-muted-foreground mb-4 leading-relaxed">
|
|
We use cookies to enhance your browsing experience and analyze our traffic. By clicking "Accept", you consent to our use of cookies.
|
|
Read our <Link href="/privacy" className="underline hover:text-foreground">Privacy Policy</Link>.
|
|
</p>
|
|
<div className="flex flex-col gap-2 sm:flex-row">
|
|
<Button variant="outline" onClick={handleDecline} className="flex-1">
|
|
Decline
|
|
</Button>
|
|
<Button onClick={handleAccept} className="flex-1">
|
|
Accept
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
)
|
|
}
|