StrafesNET/maps-service
5
Fork 0
Code Issues15 Pull Requests1 Packages Projects Releases Wiki Activity

web: activate ai dark mode

Browse Source
This commit is contained in:
Quaternions 2025-04-04 19:31:58 -07:00
parent e376e02dc1
commit 14c7979310
Signed by: Quaternions
GPG Key ID: D0DF5964F79AC131
1 changed files with 52 additions and 40 deletions

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

@ -4,8 +4,8 @@ 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";
import { useState, useEffect } from "react";
import Link from "next/link";
// MUI Components
import {
@ -14,7 +14,10 @@ import {
Button as MuiButton,
Card,
CardContent,
Skeleton
Skeleton,
ThemeProvider,
createTheme,
CssBaseline
} from "@mui/material";
interface ButtonProps {
@ -32,6 +35,12 @@ function Button({ name, href }: ButtonProps) {
);
}
const darkTheme = createTheme({
palette: {
mode: "dark",
},
});
export default function Map() {
const { mapId } = useParams();
const [map, setMap] = useState<MapInfo | null>(null);
@ -47,45 +56,48 @@ export default function Map() {
}, [mapId]);
return (
<Webpage>
{!map ? (
<Card>
<CardContent>
<Skeleton variant="text" width={200} height={40} />
<Skeleton variant="text" width={300} />
<Skeleton variant="rectangular" height={200} />
</CardContent>
</Card>
) : (
<Box display="flex" flexDirection={{ xs: "column", md: "row" }} gap={4}>
<Box flex={1}>
<Card>
<CardContent>
<Typography variant="h5" gutterBottom>
Map Info
</Typography>
<Typography variant="body1"><strong>Map ID:</strong> {mapId}</Typography>
<Typography variant="body1"><strong>Display Name:</strong> {map.DisplayName}</Typography>
<Typography variant="body1"><strong>Creator:</strong> {map.Creator}</Typography>
<Typography variant="body1"><strong>Game ID:</strong> {map.GameID}</Typography>
<Typography variant="body1"><strong>Release Date:</strong> {new Date(map.Date * 1000).toLocaleString()}</Typography>
<Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`} />
</CardContent>
</Card>
</Box>
<ThemeProvider theme={darkTheme}>
<CssBaseline />
<Webpage>
{!map ? (
<Card>
<CardContent>
<Skeleton variant="text" width={200} height={40} />
<Skeleton variant="text" width={300} />
<Skeleton variant="rectangular" height={200} />
</CardContent>
</Card>
) : (
<Box display="flex" flexDirection={{ xs: "column", md: "row" }} gap={4}>
<Box flex={1}>
<Card>
<CardContent>
<Typography variant="h5" gutterBottom>
Map Info
</Typography>
<Typography variant="body1"><strong>Map ID:</strong> {mapId}</Typography>
<Typography variant="body1"><strong>Display Name:</strong> {map.DisplayName}</Typography>
<Typography variant="body1"><strong>Creator:</strong> {map.Creator}</Typography>
<Typography variant="body1"><strong>Game ID:</strong> {map.GameID}</Typography>
<Typography variant="body1"><strong>Release Date:</strong> {new Date(map.Date * 1000).toLocaleString()}</Typography>
<Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`} />
</CardContent>
</Card>
</Box>
<Box flex={1}>
<Card>
<CardContent>
<Typography variant="h6" gutterBottom>
Map Preview
</Typography>
<MapImage id={map.ID} />
</CardContent>
</Card>
<Box flex={1}>
<Card>
<CardContent>
<Typography variant="h6" gutterBottom>
Map Preview
</Typography>
<MapImage id={map.ID} />
</CardContent>
</Card>
</Box>
</Box>
</Box>
)}
</Webpage>
)}
</Webpage>
</ThemeProvider>
);
}