web: ai maps page again

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

@@ -7,51 +7,77 @@ import { useParams } from "next/navigation";
 import Link from "next/link";
 import { useState, useEffect } from "react";
 
-interface Button {
-	name: string,
-	href: string,
+interface ButtonProps {
+	name: string;
+	href: string;
 }
-function Button(button: Button) {
+
+function Button({ name, href }: ButtonProps) {
 	return (
-		<Link href={button.href}>
-			<button>{button.name}</button>
+		<Link href={href}>
+			<button className="mt-6 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-xl shadow transition">
+				{name}
+			</button>
 		</Link>
-	)
+	);
 }
 
 export default function Map() {
-	const {mapId} = useParams()
+	const { mapId } = useParams();
+	const [map, setMap] = useState<MapInfo | null>(null);
 
-  const [map, setMap] = useState<MapInfo | null>(null)
-
-	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)
+	useEffect(() => {
 		async function getMap() {
-			const res = await fetch(`/api/maps/${mapId}`)
+			const res = await fetch(`/api/maps/${mapId}`);
 			if (res.ok) {
-				setMap(await res.json())
+				setMap(await res.json());
 			}
 		}
-      getMap()
-	}, [mapId])
+		getMap();
+	}, [mapId]);
 
 	if (!map) {
-		return <Webpage>
-			{/* TODO: Add skeleton loading thingy ? Maybe ? (https://mui.com/material-ui/react-skeleton/) */}
-		</Webpage>
+		return (
+			<Webpage>
+				<div className="p-12 text-center text-gray-500">Loading map data...</div>
+			</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>
-	)
+
+	return (
+		<Webpage>
+			<div className="max-w-4xl mx-auto p-6">
+				<div className="bg-white dark:bg-zinc-900 shadow-xl rounded-2xl p-8 space-y-8">
+					{/* Title */}
+					<h1 className="text-3xl font-bold text-center">{map.DisplayName}</h1>
+
+					{/* Image */}
+					<div className="w-full overflow-hidden rounded-xl border border-zinc-300 dark:border-zinc-700 shadow-md">
+						<MapImage id={map.ID} />
+					</div>
+
+					{/* Info grid */}
+					<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-center text-zinc-700 dark:text-zinc-300">
+						<div>
+							<p className="text-sm font-medium text-zinc-500">Creator</p>
+							<p className="text-lg">{map.Creator}</p>
+						</div>
+						<div>
+							<p className="text-sm font-medium text-zinc-500">Game ID</p>
+							<p className="text-lg">{map.GameID}</p>
+						</div>
+						<div>
+							<p className="text-sm font-medium text-zinc-500">Release Date</p>
+							<p className="text-lg">{map.Date}</p>
+						</div>
+					</div>
+
+					{/* Button */}
+					<div className="text-center">
+						<Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`} />
+					</div>
+				</div>
+			</div>
+		</Webpage>
+	);
 }