migrate footer and 404 page

unitedsystemscooperative · Sep 25, 2024 · ee973bc · ee973bc
1 parent d7c71f9
commit ee973bc
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 27 deletions.
diff --git a/src/app/_components/footer.tsx b/src/app/_components/footer.tsx
@@ -0,0 +1,91 @@
+import { Box, Container, Link, Paper, Typography, useTheme } from '@mui/material';
+import NextLink from 'next/link';
+
+function ImgCopyright() {
+  return (
+    <Typography variant="body2" color="textSecondary" style={{ textAlign: 'center' }}>
+      Thank you to CMDR RaZ uryel for the background image
+    </Typography>
+  );
+}
+function Copyright() {
+  return (
+    <Typography variant="body2" color="textSecondary" style={{ textAlign: 'center' }}>
+      {'Copyright © '}
+      <Link color="inherit" href="https://unitedsystems.org/">
+        United Systems Cooperative
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}
+
+function SiteMap() {
+  return (
+    <Typography variant="body2" color="textSecondary" style={{ textAlign: 'center' }}>
+      <NextLink href="/home" passHref legacyBehavior>
+        <Link>Home</Link>
+      </NextLink>{' '}
+      |{' '}
+      <NextLink href="/about" passHref legacyBehavior>
+        <Link>About</Link>
+      </NextLink>{' '}
+      |{' '}
+      <NextLink href="/information" passHref legacyBehavior>
+        <Link>Information</Link>
+      </NextLink>{' '}
+      |{' '}
+      <NextLink href="/builds" passHref legacyBehavior>
+        <Link>USC Builds</Link>
+      </NextLink>{' '}
+      |{' '}
+      <NextLink href="/massacres" passHref legacyBehavior>
+        <Link>Massacre Tracker</Link>
+      </NextLink>{' '}
+      |{' '}
+      <NextLink href="/merch" passHref legacyBehavior>
+        <Link>Merch</Link>
+      </NextLink>{' '}
+      |{' '}
+      <NextLink href="/admin" passHref legacyBehavior>
+        <Link>Admin</Link>
+      </NextLink>{' '}
+      |{' '}
+      <NextLink href="/dev" passHref legacyBehavior>
+        <Link>Developer</Link>
+      </NextLink>{' '}
+      |{' '}
+      <NextLink href="/releases" passHref legacyBehavior>
+        <Link>Release Notes</Link>
+      </NextLink>
+    </Typography>
+  );
+}
+
+export const Footer = ({ version }: { version: string }) => {
+  return (
+    <Box
+      component="footer"
+      sx={{
+        marginTop: 'auto',
+      }}>
+      <Paper
+        sx={{
+          px: 2,
+          py: 3,
+          mr: 0,
+          ml: 0,
+        }}>
+        <Container maxWidth="sm" sx={{ textAlign: 'center' }}>
+          <Copyright />
+          <ImgCopyright />
+          <SiteMap />
+          <Typography variant="body2" color="textSecondary">
+            Version: {version}
+          </Typography>
+        </Container>
+      </Paper>
+    </Box>
+  );
+};
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,9 +1,11 @@
 import { theme } from '@/styles/theme';
-import { CssBaseline, ThemeProvider } from '@mui/material';
+import { Box, CssBaseline, ThemeProvider } from '@mui/material';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
 import { Roboto } from 'next/font/google';
 import { AuthSessionProvider } from './_components/auth-session-provider';
 import { Navbar } from './_components/navbar';
+import { Footer } from './_components/footer';
+import info from '../../package.json';
 
 const roboto = Roboto({
   weight: ['300', '400', '500', '700'],
@@ -20,8 +22,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <ThemeProvider theme={theme}>
             <AuthSessionProvider>
               <CssBaseline />
-              <Navbar />
-              {children}
+              <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+                <Navbar />
+                <Box component="main" sx={{ mt: 0, mb: 2 }}>
+                  {children}
+                </Box>
+                <Footer version={info.version} />
+              </Box>
             </AuthSessionProvider>
           </ThemeProvider>
         </AppRouterCacheProvider>

diff --git a/src/pages/not-found.tsx → src/app/not-found.tsx b/src/pages/not-found.tsx → src/app/not-found.tsx
@@ -1,22 +1,23 @@
 import { Box, Container, Link, Paper, Typography } from '@mui/material';
-import Head from 'next/head';
+import { Metadata } from 'next';
 import Image from 'next/image';
 import NextLink from 'next/link';
 import errorImg from 'public/img/404.jpg';
 
-const NotFoundPage = () => {
+export const metadata: Metadata = {
+  title: 'United Systems Cooperative',
+  description: 'not found page',
+};
+
+export default function NotFoundPage() {
   return (
     <>
-      <Head>
-        <title>United Systems Cooperative</title>
-        <meta name="description" content="Web site of the United Systems Cooperative" />
-      </Head>
       <Container maxWidth="lg" sx={{ textAlign: 'center', marginTop: 1 }}>
         <Paper>
           <Typography variant="h3">Mistakes were made</Typography>
           <Typography variant="subtitle1">
             You were hyperdicted... escape destruction by going{' '}
-            <NextLink href="/home" passHref>
+            <NextLink href="/home" passHref legacyBehavior>
               <Link>home</Link>
             </NextLink>
             .
@@ -31,6 +32,4 @@ const NotFoundPage = () => {
       </Container>
     </>
   );
-};
-
-export default NotFoundPage;
+}
diff --git a/src/layouts/components/footer.tsx b/src/layouts/components/footer.tsx
@@ -24,39 +24,39 @@ function Copyright() {
 function SiteMap() {
   return (
     <Typography variant="body2" color="textSecondary" style={{ textAlign: 'center' }}>
-      <NextLink href="/home" passHref>
+      <NextLink href="/home" passHref legacyBehavior>
         <Link>Home</Link>
       </NextLink>{' '}
       |{' '}
-      <NextLink href="/about" passHref>
+      <NextLink href="/about" passHref legacyBehavior>
         <Link>About</Link>
       </NextLink>{' '}
       |{' '}
-      <NextLink href="/information" passHref>
+      <NextLink href="/information" passHref legacyBehavior>
         <Link>Information</Link>
       </NextLink>{' '}
       |{' '}
-      <NextLink href="/builds" passHref>
+      <NextLink href="/builds" passHref legacyBehavior>
         <Link>USC Builds</Link>
       </NextLink>{' '}
       |{' '}
-      <NextLink href="/massacres" passHref>
+      <NextLink href="/massacres" passHref legacyBehavior>
         <Link>Massacre Tracker</Link>
       </NextLink>{' '}
       |{' '}
-      <NextLink href="/merch" passHref>
+      <NextLink href="/merch" passHref legacyBehavior>
         <Link>Merch</Link>
       </NextLink>{' '}
       |{' '}
-      <NextLink href="/admin" passHref>
+      <NextLink href="/admin" passHref legacyBehavior>
         <Link>Admin</Link>
       </NextLink>{' '}
       |{' '}
-      <NextLink href="/dev" passHref>
+      <NextLink href="/dev" passHref legacyBehavior>
         <Link>Developer</Link>
       </NextLink>{' '}
       |{' '}
-      <NextLink href="/releases" passHref>
+      <NextLink href="/releases" passHref legacyBehavior>
         <Link>Release Notes</Link>
       </NextLink>
     </Typography>

diff --git a/src/layouts/components/navLink.tsx b/src/layouts/components/navLink.tsx
@@ -3,13 +3,10 @@ import { useRouter } from 'next/router';
 import { cloneElement } from 'react';
 
 export default function NavLink({ href, children }: { href: string; children: JSX.Element }) {
-  const router = useRouter();
+  const pathName = useRouter().pathname;
 
   let className = children.props.className || '';
-  if (
-    href === router.pathname ||
-    (router.pathname.length > 1 && router.pathname.startsWith(href))
-  ) {
+  if (pathName && (href === pathName || (href.length > 1 && pathName.startsWith(href)))) {
     className = `${className} active`;
   }