bad code

web/src/app/maps/(styles)/page.scss

@@ -0,0 +1,43 @@
+.maps-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Allows 4 cards per row */
+    gap: 20px;
+    width: 100%;
+    max-width: 1200px;
+    padding: 20px;
+    margin: 0 auto;
+}
+
+.map-card {
+    background: #1e1e1e;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    transition: transform 0.2s ease-in-out;
+
+    &:hover {
+        transform: scale(1.05);
+    }
+
+    img {
+        width: 100%;
+        height: 200px;
+        object-fit: cover; /* Ensures the image covers the space without being cut off */
+    }
+
+    .map-info {
+        padding: 15px;
+        text-align: center;
+
+        h2 {
+            font-size: 1.2rem;
+            font-weight: bold;
+            color: #ffffff;
+        }
+
+        p {
+            font-size: 1rem;
+            color: #bbbbbb;
+        }
+    }
+}

web/src/app/maps/page.tsx

@@ -1,24 +1,60 @@
-"use client"
+"use client";
 
+import Image from "next/image";
 import { useState, useEffect } from "react";
 import Webpage from "@/app/_components/webpage";
 
+import "./(styles)/page.scss";
+
+interface Map {
+	ID: number;
+	DisplayName: string;
+	Creator: string;
+	GameID: number;
+	Date: number;
+}
+
+// TODO: should rewrite this entire page, just wanted to get a simple page working. This was written by chatgippity
+
 export default function MapsPage() {
-    const [ingameMaps, setIngameMaps] = useState();
+	const [maps, setMaps] = useState<Map[]>([]);
 
-    useEffect(() => {
-        fetch("/api/maps?Page=1&Limit=10")
-            .then(response => response.json())
-            .then(setIngameMaps);
-    }, []);
+	useEffect(() => {
+		const fetchMaps = async () => {
+			const res = await fetch("/api/maps?Page=1&Limit=100");
+			const data: Map[] = await res.json();
+			setMaps(data);
+		};
 
-    useEffect(() => {
-        console.log(ingameMaps);
-    }, [ingameMaps]);
-    
-    return (
-        <Webpage>
-            <p>maps</p>
-        </Webpage>
-    );
+		fetchMaps();
+	}, []);
+
+	const customLoader = ({ src }: { src: string }) => {
+		return src;
+	};
+
+	return (
+		<Webpage>
+			<div className="maps-container">
+				{maps.map((map) => (
+					<div key={map.ID} className="map-card">
+						<a href={`/maps/${map.ID}`} className="block">
+							<Image
+								loader={customLoader}
+								src={`/thumbnails/maps/${map.ID}`}
+								alt={map.DisplayName}
+								width={500}
+								height={300}
+								className="w-full h-48 object-cover"
+							/>
+							<div className="map-info">
+								<h2>{map.DisplayName}</h2>
+								<p>By {map.Creator}</p>
+							</div>
+						</a>
+					</div>
+				))}
+			</div>
+		</Webpage>
+	);
 }

web/src/app/thumbnails/maps/[mapId]/route.tsx

@@ -0,0 +1,13 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(
+    request: NextRequest,
+    context: { params: Promise<{ mapId: string }> }
+): Promise<NextResponse> {
+    // TODO: implement this, we need a cdn for in-game map thumbnails...
+
+    const { mapId } = await context.params;
+    const baseUrl = request.nextUrl.origin; // Gets the current base URL
+
+    return NextResponse.redirect(`${baseUrl}/thumbnails/asset/${mapId}`);
+}