web: replace maps page with ai

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

@@ -7,51 +7,62 @@ import { useParams } from "next/navigation";
 import Link from "next/link";
 import { useState, useEffect } from "react";
 
-interface Button {
+interface ButtonProps {
-	name: string,
+	name: string;
-	href: string,
+	href: string;
 }
-function Button(button: Button) {
+
+function Button({ name, href }: ButtonProps) {
 	return (
-		<Link href={button.href}>
+		<Link href={href}>
-			<button>{button.name}</button>
+			<button className="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-md 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(() => {
-
-	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)
 		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()
+		getMap();
-	}, [mapId])
+	}, [mapId]);
 
 	if (!map) {
-		return <Webpage>
+		return (
-			{/* TODO: Add skeleton loading thingy ? Maybe ? (https://mui.com/material-ui/react-skeleton/) */}
+			<Webpage>
-		</Webpage>
+				<div className="p-8 text-center text-gray-500">Loading map data...</div>
+			</Webpage>
+		);
 	}
-  return (
+
-      <Webpage>
+	return (
-	      <p>MapID: { mapId }</p>
+		<Webpage>
-	      <p>Display Name: { map.DisplayName }</p>
+			<div className="max-w-4xl mx-auto p-4">
-	      <p>Creator: { map.Creator }</p>
+				<div className="mb-6">
-	      <p>GameID: { map.GameID }</p>
+					<h1 className="text-3xl font-bold mb-2">{map.DisplayName}</h1>
-	      <p>Release Date: { map.Date }</p>
+					<div className="text-gray-700">
-	      <Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`}/>
+						<p><strong>MapID:</strong> {mapId}</p>
-       <aside className="review-area">
+						<p><strong>Creator:</strong> {map.Creator}</p>
-        	<section className="map-image-area">
+						<p><strong>GameID:</strong> {map.GameID}</p>
-         <MapImage id={map.ID}/>
+						<p><strong>Release Date:</strong> {map.Date}</p>
-         	</section>
+					</div>
-        </aside>
+				</div>
-      </Webpage>
+
-	)
+				<div className="rounded-xl overflow-hidden shadow-lg border mb-6">
+					<MapImage id={map.ID} />
+				</div>
+
+				<Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`} />
+			</div>
+		</Webpage>
+	);
 }