Anibus/Soulstorm-wiki-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moved to next js ssr

Browse Source
This commit is contained in:
anibus
2026-08-15 14:46:19 +03:00
parent 4e4f798d85
commit 2184f1642c
37 changed files with 854 additions and 17862 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AppShell.tsx
+112
View File
@@ -0,0 +1,112 @@
'use client';
import React from 'react';
import {
AppBar,
Box,
Container,
IconButton,
Toolbar,
Typography,
} from '@mui/material';
import Link from 'next/link';
import { styled } from '@mui/material/styles';
import { useThemeContext } from '@/src/context/ThemeContext';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeIcon from '@mui/icons-material/LightMode';
// Styled components
const StyledAppBar = styled(AppBar)(({ theme }) => ({
background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)',
boxShadow: '0 4px 20px rgba(0, 0, 0, 0.3)',
borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
}));
const StyledAppBarLight = styled(AppBar)(({ theme }) => ({
background: 'linear-gradient(135deg, #ffffff 0%, #f0f0f0 50%, #e0e0e0 100%)',
boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)',
borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
}));
const LogoText = styled(Typography)(({ theme }) => ({
fontSize: '1.5rem',
fontWeight: 800,
background: theme.palette.mode === 'dark'
? 'linear-gradient(135deg, #dee2e6 0%, #cccccc 100%)'
: 'linear-gradient(135deg, #1a1a2e 0%, #333333 100%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: theme.palette.mode === 'dark' ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
letterSpacing: '-0.5px',
cursor: 'pointer',
'&:hover': {
transform: 'scale(1.05)',
transition: 'transform 0.2s ease',
},
}));
const ThemeToggle = styled(IconButton)(({ theme }) => ({
color: 'inherit',
'&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.1)',
},
}));
const ThemeToggleLight = styled(IconButton)(({ theme }) => ({
color: 'inherit',
'&:hover': {
backgroundColor: 'rgba(0, 0, 0, 0.05)',
},
}));
const LogoLink = styled(Link)({
display: 'flex',
alignItems: 'center',
gap: 8,
textDecoration: 'none',
color: 'inherit',
});
export default function AppShell({ children }: { children: React.ReactNode }) {
const { mode, toggleTheme } = useThemeContext();
const isDark = mode === 'dark';
return (
<Box sx={{ minHeight: '100vh' }}>
{isDark ? (
<StyledAppBar position="sticky">
<Container maxWidth="lg" sx={{ px: { xs: 1, sm: 3, md: 3 } }}>
<Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
<LogoLink href="/">
<img src="/images/dowdelogo.png" alt="logo" style={{ height: 32, cursor: 'pointer' }} />
<LogoText variant="h6">
Wiki
</LogoText>
</LogoLink>
<ThemeToggle onClick={toggleTheme} size="large">
<LightModeIcon />
</ThemeToggle>
</Toolbar>
</Container>
</StyledAppBar>
) : (
<StyledAppBarLight position="sticky">
<Container maxWidth="lg" sx={{ px: { xs: 1, sm: 3, md: 3 } }}>
<Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
<LogoLink href="/">
<img src="/images/dowdelogo.png" alt="logo" style={{ height: 32, cursor: 'pointer' }} />
<LogoText variant="h6">
Wiki
</LogoText>
</LogoLink>
<ThemeToggleLight onClick={toggleTheme} size="large">
<DarkModeIcon sx={{ color: '#000000' }} />
</ThemeToggleLight>
</Toolbar>
</Container>
</StyledAppBarLight>
)}
<Container maxWidth="lg" sx={{ py: 4, px: { xs: 1, sm: 3, md: 3 } }}>
{children}
</Container>
</Box>
);
}
components/pages/BuildingPageClient.tsx
+16
View File
@@ -0,0 +1,16 @@
'use client';
import dynamic from 'next/dynamic';
import { Box, LinearProgress } from '@mui/material';
const BuildingPageLegacy = dynamic(() => import('@/src/legacy-pages/BuildingPage'), {
ssr: false,
loading: () => (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
<LinearProgress sx={{ width: '200px' }} />
</Box>
),
});
export default function BuildingPageClient() {
return <BuildingPageLegacy />;
}
components/pages/ModPageClient.tsx
+16
View File
@@ -0,0 +1,16 @@
'use client';
import dynamic from 'next/dynamic';
import { Box, LinearProgress } from '@mui/material';
const ModPageLegacy = dynamic(() => import('@/src/legacy-pages/ModPage'), {
ssr: false,
loading: () => (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
<LinearProgress sx={{ width: '200px' }} />
</Box>
),
});
export default function ModPageClient() {
return <ModPageLegacy />;
}
components/pages/ModsPageClient.tsx
+14
View File
@@ -0,0 +1,14 @@
'use client';
import dynamic from 'next/dynamic';
import { Box, LinearProgress } from '@mui/material';
import { IMod } from '@/src/types/Imod';
const ModsPageLegacy = dynamic(() => import('@/src/legacy-pages/ModsPage'));
interface ModsPageClientProps {
initialMods: IMod[];
}
export default function ModsPageClient({ initialMods }: ModsPageClientProps) {
return <ModsPageLegacy initialMods={initialMods} />;
}
components/pages/RacePageClient.tsx
+16
View File
@@ -0,0 +1,16 @@
'use client';
import dynamic from 'next/dynamic';
import { Box, LinearProgress } from '@mui/material';
const RacePageLegacy = dynamic(() => import('@/src/legacy-pages/RacePageFast'), {
ssr: false,
loading: () => (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
<LinearProgress sx={{ width: '200px' }} />
</Box>
),
});
export default function RacePageClient() {
return <RacePageLegacy />;
}
components/pages/UnitPageClient.tsx
+16
View File
@@ -0,0 +1,16 @@
'use client';
import dynamic from 'next/dynamic';
import { Box, LinearProgress } from '@mui/material';
const UnitPageLegacy = dynamic(() => import('@/src/legacy-pages/UnitPage'), {
ssr: false,
loading: () => (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
<LinearProgress sx={{ width: '200px' }} />
</Box>
),
});
export default function UnitPageClient() {
return <UnitPageLegacy />;
}