web/src/app/maps/[mapId]/_mapImage.tsx

@@ -0,0 +1,28 @@
+import Image from "next/image";
+import { MapInfo } from "@/app/ts/Map";
+
+interface AssetID {
+	id: MapInfo["ID"];
+}
+
+function MapImage({ id }: AssetID) {
+	if (!id) {
+		return <p>Missing asset ID</p>;
+	}
+
+	const imageUrl = `/thumbnails/asset/${id}`;
+
+	return (
+		<Image
+			src={imageUrl}
+			alt="Map Thumbnail"
+			layout="responsive"
+			width={512}
+			height={512}
+			priority={true}
+			className="map-image"
+		/>
+	);
+}
+
+export { type AssetID, MapImage };

web/src/app/maps/[mapId]/page.tsx

@@ -1,8 +1,11 @@
 "use client"
 
+import { MapInfo } from "@/app/ts/Map";
+import { MapImage } from "./_mapImage";
 import Webpage from "@/app/_components/webpage";
 import { useParams } from "next/navigation";
 import Link from "next/link";
+import { useState, useEffect } from "react";
 
 interface Button {
 	name: string,
@@ -17,12 +20,38 @@ function Button(button: Button) {
 }
 
 export default function Map() {
-    const { mapId } = useParams()
+	const {mapId} = useParams()
 
-    return (
+  const [map, setMap] = useState<MapInfo | null>(null)
-        <Webpage>
+
-            <p>map { mapId }</p>
+	useEffect(() => { // needs to be client sided since server doesn't have a session, nextjs got mad at me for exporting an async function: (https://nextjs.org/docs/messages/no-async-client-component)
-            <Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`}/>
+		async function getMap() {
-        </Webpage>
+			const res = await fetch(`/api/maps/${mapId}`)
-    );
+			if (res.ok) {
+				setMap(await res.json())
+			}
+		}
+      getMap()
+	}, [mapId])
+
+	if (!map) {
+		return <Webpage>
+			{/* TODO: Add skeleton loading thingy ? Maybe ? (https://mui.com/material-ui/react-skeleton/) */}
+		</Webpage>
+	}
+  return (
+      <Webpage>
+	      <p>MapID: { mapId }</p>
+	      <p>Display Name: { map.DisplayName }</p>
+	      <p>Creator: { map.Creator }</p>
+	      <p>GameID: { map.GameID }</p>
+	      <p>Release Date: { map.Date }</p>
+	      <Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`}/>
+       <aside className="review-area">
+        	<section className="map-image-area">
+         <MapImage id={map.ID}/>
+         	</section>
+        </aside>
+      </Webpage>
+	)
 }

web/src/app/ts/Map.ts

@@ -0,0 +1,11 @@
+interface MapInfo {
+    readonly ID:            number,
+    readonly DisplayName:   string,
+    readonly Creator:       string,
+    readonly GameID:        number,
+    readonly Date:          number,
+}
+
+export {
+	type MapInfo
+}