Modal pop up

Modal will now appear when clicking on a link.
As of now, no downloads are available, but the link technically works.

Author: Jacobdeanr

app/ui/modal.tsx

@@ -0,0 +1,63 @@
+'use client';
+import { useEffect } from 'react';
+
+type Props = {
+  slug: string;
+  onClose: () => void;
+};
+
+export default function Modal({ slug, onClose }: Props) {
+  const imgBase = `/Source_Skyboxes_NextJS/skyboxes/${slug}/images`;
+
+  useEffect(() => {
+    const original = document.documentElement.style.overflow;
+    document.documentElement.style.overflow = 'hidden';
+
+    return () => {
+      document.documentElement.style.overflow = original;
+    };
+  }, []);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose]);
+
+  return (
+    <div
+      onClick={onClose}
+      className="fixed inset-0 z-50 bg-black/75 backdrop-blur-sm flex justify-center items-center p-4"
+    >
+      <article
+        onClick={e => e.stopPropagation()}
+        className="
+            w-full max-w-[90vw]
+            sm:max-w-xl
+            md:max-w-2xl
+            lg:max-w-3xl
+            xl:max-w-4xl
+            max-h-[70vh] overflow-y-auto
+            bg-neutral-900 rounded-lg shadow-xl ring-1 ring-neutral-700/60
+        "
+        >
+        <img
+          src={`${imgBase}/previews/1.webp`}
+          alt={`${slug} preview`}
+          className="w-full"
+        />
+
+        <div className="p-4">
+          <h2 className="text-xl font-bold mb-2">{slug}</h2>
+          <a
+            href={`/Source_Skyboxes_NextJS/skyboxes/${slug}/download/${slug}.7z`}
+            className="underline text-blue-300"
+            download
+          >
+            Download
+          </a>
+        </div>
+      </article>
+    </div>
+  );
+}

app/ui/skyboxcard.tsx

@@ -1,64 +1,61 @@
-import Image from 'next/image';
-import Link  from 'next/link';
+'use client';
 
-type Props = {
-    slug: string;
-  };
+import Image from 'next/image';
+import Modal from './modal';
+import { useState } from 'react';
 
-  export default function SkyboxCard({ slug }: Props) {
-    const imgBase   = `/Source_Skyboxes_NextJS/skyboxes/${slug}/images`;
-    const details   = `/${slug}`;
+type Props = { slug: string };
 
-    const thumbnail = `${imgBase}/thumbnail.webp`;
+export default function SkyboxCard({ slug }: Props) {
+  const [open, setOpen] = useState(false);
+  const imgBase = `/Source_Skyboxes_NextJS/skyboxes/${slug}/images`;
 
-    //placeholder
-    const description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
-  
-    return (
-    <Link href={details}>
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="group block w-full text-left"
+      >
         <article
+          className="
+            relative flex flex-col
+            bg-neutral-800 ring-1 ring-neutral-700/60
+            shadow-lg shadow-black/40
+            transition hover:scale-105
+            overflow-hidden aspect-[16/9] w-full
+          "
+          style={{
+            backgroundImage: `url(${imgBase}/thumbnail.webp)`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }}
+        >
+          <Image
+            src={`${imgBase}/thumbnail.webp`}
+            alt={`${slug} preview`}
+            fill
+            className="opacity-0"
+            unoptimized
+          />
+
+          <div
             className="
-                group
-                relative flex flex-col items-center
-                bg-neutral-800 ring-1 ring-neutral-700/60
-                shadow-lg shadow-black/40
-                transition duration-150 hover:scale-105
-                overflow-hidden
-                aspect-[16/9]
+              absolute inset-x-0 bottom-0
+              translate-y-0 opacity-100
+              md:translate-y-full md:opacity-0
+              md:group-hover:translate-y-0 md:group-hover:opacity-100
+              bg-black/60 backdrop-blur-xs px-3 py-2
+              transition
             "
-            style={{
-                backgroundImage: `url(${thumbnail})`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'center',
-            }}
-            >
-                
-            {/* Visually hidden image for SEO/alt text */}
-            <Image
-                src={thumbnail}
-                alt={`${slug} preview`}
-                fill
-                className="opacity-0"
-                unoptimized
-            />
-            <div
-                className="
-                    absolute inset-x-0 bottom-0
-                    translate-y-0 opacity-100
-                    md:translate-y-full
-                    md:opacity-0
-                    md:group-hover:translate-y-0
-                    md:group-hover:opacity-100
-                    bg-black/60 backdrop-blur-xs
-                    px-3 py-2
-                    transition duration-150
-                "
-                >
-                <h2 className="text-sm font-semibold text-neutral-100 truncate">
-                    {slug}
-                </h2>
-            </div>
+          >
+            <h2 className="text-sm font-semibold text-neutral-100 truncate">
+              {slug}
+            </h2>
+          </div>
         </article>
-    </Link>
-    );
-  }
+      </button>
+
+      {open && <Modal slug={slug} onClose={() => setOpen(false)} />}
+    </>
+  );
+}