Cookie Banner homepage

Author: PopDaph

front/pages/index.tsx

@@ -36,6 +36,8 @@ import {
 
 const defaultFlexClasses = "flex flex-col gap-4";
 
+import { Transition } from "@headlessui/react";
+
 import {
   SignInDropDownButton,
   SignUpDropDownButton,
@@ -90,6 +92,9 @@ export default function Home({
   const scrollRef3 = useRef<HTMLDivElement | null>(null);
   const scrollRef4 = useRef<HTMLDivElement | null>(null);
 
+  const [showCookieBanner, setShowCookieBanner] = useState<boolean>(true);
+  const [hasAcceptedCookies, setHasAcceptedCookies] = useState<boolean>(false);
+
   useEffect(() => {
     if (logoRef.current) {
       const logoPosition = logoRef.current.offsetTop;
@@ -752,21 +757,34 @@ export default function Home({
         </div>
 
         <Footer />
-        <>
-          <Script
-            src={`https://www.googletagmanager.com/gtag/js?id=${gaTrackingId}`}
-            strategy="afterInteractive"
-          />
-          <Script id="google-analytics" strategy="afterInteractive">
-            {`
+        <CookieBanner
+          className="fixed bottom-4 right-4"
+          show={showCookieBanner}
+          onClickAccept={() => {
+            setHasAcceptedCookies(true);
+            setShowCookieBanner(false);
+          }}
+          onClickRefuse={() => {
+            setShowCookieBanner(false);
+          }}
+        />
+        {hasAcceptedCookies && (
+          <>
+            <Script
+              src={`https://www.googletagmanager.com/gtag/js?id=${gaTrackingId}`}
+              strategy="afterInteractive"
+            />
+            <Script id="google-analytics" strategy="afterInteractive">
+              {`
              window.dataLayer = window.dataLayer || [];
              function gtag(){window.dataLayer.push(arguments);}
              gtag('js', new Date());
 
              gtag('config', '${gaTrackingId}');
             `}
-          </Script>
-        </>
+            </Script>
+          </>
+        )}
       </main>
     </>
   );
@@ -969,3 +987,55 @@ const Footer = () => {
     </div>
   );
 };
+
+const CookieBanner = ({
+  show,
+  onClickAccept,
+  onClickRefuse,
+  className,
+}: {
+  show: boolean;
+  onClickAccept: () => void;
+  onClickRefuse: () => void;
+  className?: string;
+}) => {
+  return (
+    <Transition
+      show={show}
+      enter="transition-opacity s-duration-300"
+      appear={true}
+      enterFrom="opacity-0"
+      enterTo="opacity-100"
+      leave="transition-opacity duration-300"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+      className={classNames(
+        "z-30 flex w-72 flex-col gap-3 rounded-xl border border-pink-100 bg-pink-50 p-4 shadow-xl",
+        className || ""
+      )}
+    >
+      <div className="text-sm font-normal text-element-900">
+        We use cookies to improve your experience on our site. By using our
+        service, you agree to our{" "}
+        <A variant="tertiary">
+          <Link href="/terms">Terms of Use</Link>
+        </A>
+        .
+      </div>
+      <div className="flex gap-2">
+        <Button
+          variant="primary"
+          size="sm"
+          label="Accept All"
+          onClick={onClickAccept}
+        />
+        <Button
+          variant="tertiary"
+          size="sm"
+          label="Reject All"
+          onClick={onClickRefuse}
+        />
+      </div>
+    </Transition>
+  );
+};