gitea +

frontend/components/compliance/CookieBanner.tsx

@@ -0,0 +1,66 @@
+'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>
+    )
+}