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> ) }