diff --git a/components/CookiePopup.tsx b/components/CookiePopup.tsx new file mode 100644 index 0000000..68f9e12 --- /dev/null +++ b/components/CookiePopup.tsx @@ -0,0 +1,59 @@ +import { useEffect, useState } from "react"; +import Link from "next/link"; +import styles from "@/styles/components/CookiePopup.module.css"; + +const USE_ILLUSTRATED = false; + +export default function CookiePopup() { + const [visible, setVisible] = useState(false); + + useEffect(() => { + const consent = localStorage.getItem("cookieConsent"); + if (!consent) { + setVisible(true); + } + }, []); + + const acceptCookies = () => { + localStorage.setItem("cookieConsent", "true"); + setVisible(false); + }; + + if (!visible) return null; + + return ( +
+
+
+ {USE_ILLUSTRATED ? ( + <> + + + + ) : ( + 🍪 + )} +
+ +

+ We care about your data, and we'd love to use cookies to make + your experience better. +

+ +
+ + Privacy Policy + + + +
+
+
+ ); +} diff --git a/components/Layout.tsx b/components/Layout.tsx index e50a31f..e90d184 100755 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -4,6 +4,7 @@ import Header from "./Header"; import BackgroundPolygons from "@/components/BackgroundPolygons"; import Footer from "@/components/Footer"; import {ReactNode} from "react"; +import CookiePopup from "@/components/CookiePopup"; const Layout = ( { children, triangles = false, darkHeader = false }: {children: ReactNode, triangles?: boolean, darkHeader?: boolean }) => { @@ -29,6 +30,8 @@ const Layout = ( { children, triangles = false, darkHeader = false }: {children: {children} + +