Update src/app/components/AgeVerificationModal.tsx

Merge version_2 into main

src/app/components/AgeVerificationModal.tsx

@@ -3,59 +3,75 @@
 import React, { useState, useEffect } from "react";
 import { createPortal } from "react-dom";
 
-const AgeVerificationModal = ({ children }: { children: React.ReactNode }) => {
+const AgeVerificationModal: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [isVerified, setIsVerified] = useState(true);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isVerified, setIsVerified] = useState(false);
+  const [mounted, setMounted] = useState(false); // To handle client-side rendering for portal
 
   useEffect(() => {
-    if (typeof window !== "undefined") {
+    setMounted(true); // Component is mounted on client
-      const ageVerified = localStorage.getItem("ageVerified");
+    const verified = localStorage.getItem("ageVerified");
-      if (ageVerified === "true") {
+    if (verified === "true") {
-        setIsVerified(true);
+      setIsVerified(true);
-      } else {
+    } else {
-        setIsModalOpen(true);
+      setIsVerified(false);
-      }
+      setIsModalOpen(true); // Open modal if not verified
     }
   }, []);
 
-  const handleVerifyAge = (verified: boolean) => {
+  const handleVerify = () => {
-    if (typeof window !== "undefined") {
+    localStorage.setItem("ageVerified", "true");
-      localStorage.setItem("ageVerified", verified ? "true" : "false");
+    setIsVerified(true);
-      setIsVerified(verified);
+    setIsModalOpen(false); // Close modal
-      setIsModalOpen(false);
-      if (!verified) {
-        window.location.href = "https://www.google.com"; // Redirect if not verified
-      }
-    }
   };
 
   if (isVerified) {
     return <>{children}</>;
   }
 
-  if (typeof window === "undefined" || !isModalOpen) {
+  // Render null on server, or if not mounted yet
+  if (!mounted || !isModalOpen) {
     return null;
   }
 
+  // Render modal only on client when mounted and if it needs to be open
   return createPortal(
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80">
+    <div
-      <div className="bg-white p-8 rounded-lg shadow-xl text-center max-w-sm mx-auto">
+      className={`fixed inset-0 z-[9999] flex items-center justify-center bg-black/70 backdrop-blur-sm 
-        <h2 className="text-2xl font-bold mb-4 text-black">Leeftijdsverificatie</h2>
+                  transition-opacity duration-300 ease-out ${isModalOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
-        <p className="text-gray-700 mb-6">U moet 18 jaar of ouder zijn om deze website te bezoeken.</p>
+      aria-modal="true"
-        <div className="flex justify-center space-x-4">
+      role="dialog"
+      aria-labelledby="age-verification-title"
+      aria-describedby="age-verification-description"
+    >
+      <div
+        className={`relative max-w-md w-full mx-4 p-8 bg-card text-foreground rounded-lg shadow-2xl 
+                    transform transition-all duration-500 ease-out-back 
+                    ${isModalOpen ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'}`}
+        style={{
+          transitionProperty: 'transform, opacity',
+          transitionTimingFunction: 'cubic-bezier(0.34, 1.56, 0.64, 1)'
+        }}
+      >
+        <h2 id="age-verification-title" className="text-2xl font-bold mb-4 text-center">
+          Leeftijdsverificatie
+        </h2>
+        <p id="age-verification-description" className="text-center mb-6">
+          U moet 18 jaar of ouder zijn om deze website te bezoeken.
+        </p>
+        <div className="flex justify-center">
           <button
-            onClick={() => handleVerifyAge(true)}
+            onClick={handleVerify}
-            className="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition-colors"
+            className="px-6 py-3 bg-primary-cta text-primary-cta-text rounded-md hover:opacity-80 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-cta focus:ring-opacity-50"
           >
-            Ja, ik ben 18+
+            Ik ben 18 jaar of ouder
-          </button>
-          <button
-            onClick={() => handleVerifyAge(false)}
-            className="bg-gray-300 text-gray-800 px-6 py-2 rounded-md hover:bg-gray-400 transition-colors"
-          >
-            Nee
           </button>
         </div>
+        <p className="text-xs text-gray-500 mt-4 text-center">
+          Door te klikken bevestigt u uw leeftijd en gaat u akkoord met onze gebruiksvoorwaarden.
+        </p>
       </div>
     </div>,
     document.body