diff --git a/web/src/app/mapfixes/[mapfixId]/_mapImage.tsx b/web/src/app/mapfixes/[mapfixId]/_mapImage.tsx index f515db2..d82f482 100644 --- a/web/src/app/mapfixes/[mapfixId]/_mapImage.tsx +++ b/web/src/app/mapfixes/[mapfixId]/_mapImage.tsx @@ -1,11 +1,28 @@ +import Image from "next/image"; import { MapfixInfo } from "@/app/ts/Mapfix" interface AssetID { id: MapfixInfo["AssetID"] } -function MapImage() { - return <p>Fetching map image...</p> +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 { diff --git a/web/src/app/mapfixes/[mapfixId]/page.tsx b/web/src/app/mapfixes/[mapfixId]/page.tsx index 7ddeacb..6a1828a 100644 --- a/web/src/app/mapfixes/[mapfixId]/page.tsx +++ b/web/src/app/mapfixes/[mapfixId]/page.tsx @@ -2,7 +2,7 @@ import { MapfixInfo, MapfixStatusToString } from "@/app/ts/Mapfix"; import type { CreatorAndReviewStatus } from "./_comments"; -import { MapImage } from "./_map"; +import { MapImage } from "./_mapImage"; import { useParams } from "next/navigation"; import ReviewButtons from "./_reviewButtons"; import Comments from "./_comments"; @@ -16,13 +16,14 @@ interface ReviewId { mapfixId: string, mapfixStatus: number; mapfixSubmitter: number, + mapfixAssetId: number; } function RatingArea(mapfix: ReviewId) { return ( <aside className="review-area"> <section className="map-image-area"> - <MapImage/> + <MapImage id={mapfix.mapfixAssetId}/> </section> <ReviewButtons mapfixId={mapfix.mapfixId} mapfixStatus={mapfix.mapfixStatus} mapfixSubmitter={mapfix.mapfixSubmitter}/> </aside> @@ -74,7 +75,7 @@ export default function MapfixInfoPage() { <Webpage> <main className="map-page-main"> <section className="review-section"> - <RatingArea mapfixId={dynamicId.mapfixId} mapfixStatus={mapfix.StatusID} mapfixSubmitter={mapfix.Submitter}/> + <RatingArea mapfixId={dynamicId.mapfixId} mapfixStatus={mapfix.StatusID} mapfixSubmitter={mapfix.Submitter} mapfixAssetId={mapfix.AssetID} /> <TitleAndComments name={mapfix.DisplayName} creator={mapfix.Creator} review={mapfix.StatusID} status_message={mapfix.StatusMessage} asset_id={mapfix.AssetID} comments={[]}/> </section> </main>