From e858d252ab6800800b91c0fd7ef04ce5e9de5e4c Mon Sep 17 00:00:00 2001
From: Quaternions <krakow20@gmail.com>
Date: Fri, 4 Apr 2025 16:01:02 -0700
Subject: [PATCH] web: add map image to map page
---
web/src/app/maps/[mapId]/_mapImage.tsx | 28 ++++++++++++++++++++++++++
web/src/app/maps/[mapId]/page.tsx | 6 ++++++
2 files changed, 34 insertions(+)
create mode 100644 web/src/app/maps/[mapId]/_mapImage.tsx
diff --git a/web/src/app/maps/[mapId]/_mapImage.tsx b/web/src/app/maps/[mapId]/_mapImage.tsx
new file mode 100644
index 0000000..84bbb10
--- /dev/null
+++ b/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 };
diff --git a/web/src/app/maps/[mapId]/page.tsx b/web/src/app/maps/[mapId]/page.tsx
index 6123535..46e127b 100644
--- a/web/src/app/maps/[mapId]/page.tsx
+++ b/web/src/app/maps/[mapId]/page.tsx
@@ -1,6 +1,7 @@
"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";
@@ -46,6 +47,11 @@ export default function Map() {
<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>
)
}