72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
'use client';
|
|
import React from 'react';
|
|
import { ArrowBack } from '@mui/icons-material';
|
|
import {
|
|
Box,
|
|
Container,
|
|
Typography,
|
|
} from '@mui/material';
|
|
import { styled } from '@mui/material/styles';
|
|
import { useTheme } from '@mui/material/styles';
|
|
import { IMod } from '@/src/types/Imod';
|
|
import { IRaceUnits } from '@/src/types/IUnitShort';
|
|
import { IRaceBuildings } from '@/src/types/IBuildingShort';
|
|
import UnitsTable from '@/src/classes/UnitsTable';
|
|
import { BackButton } from '@/src/commons/BackButton';
|
|
|
|
const ModNotFound = styled(Typography)(({ theme }) => ({
|
|
color: theme.palette.text.secondary,
|
|
}));
|
|
|
|
interface ModPageClientProps {
|
|
initialMod: IMod | null;
|
|
racesUnits: IRaceUnits[];
|
|
racesBuildings: IRaceBuildings[];
|
|
}
|
|
|
|
export default function ModPageClient({ initialMod, racesUnits, racesBuildings }: ModPageClientProps) {
|
|
const theme = useTheme();
|
|
|
|
if (initialMod != null) {
|
|
const isDark = theme.palette.mode === 'dark';
|
|
|
|
return (
|
|
<Container maxWidth="lg">
|
|
<BackButton
|
|
variant="outlined"
|
|
startIcon={<ArrowBack />}
|
|
href="/"
|
|
>
|
|
Back to mods list
|
|
</BackButton>
|
|
|
|
<Typography variant="h3" component="h1" sx={{
|
|
fontWeight: 800,
|
|
mb: 1,
|
|
WebkitBackgroundClip: isDark ? 'text' : 'initial',
|
|
WebkitTextFillColor: isDark ? '#dee2e6' : 'initial',
|
|
color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
|
|
}}>
|
|
{initialMod.name} <Box component="span" sx={{
|
|
fontSize: '0.5em',
|
|
color: theme.palette.text.secondary,
|
|
fontWeight: 500,
|
|
}}>({initialMod.version})</Box>
|
|
</Typography>
|
|
|
|
<Box>
|
|
<UnitsTable modId={initialMod.id} racesUnits={racesUnits} racesBuildings={racesBuildings} />
|
|
</Box>
|
|
</Container>
|
|
);
|
|
} else {
|
|
return (
|
|
<Container maxWidth="lg" sx={{ py: 8, textAlign: 'center' }}>
|
|
<ModNotFound variant="h5">
|
|
Mod not found
|
|
</ModNotFound>
|
|
</Container>
|
|
);
|
|
}
|
|
}
|