Merge pull request #151 from LaurierCS/feature/149/route-404-page

Feature/149/route 404 page

src/pages/Error404/Error404.css

@@ -0,0 +1,20 @@
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background-color: #1b1c1f;
+  }
+
+  #root {
+    height: 100%;
+  }
+
+  .error-404-container {
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff;
+  }
+

src/pages/Error404/Error404.tsx

@@ -0,0 +1,23 @@
+import { Link } from "react-router-dom";
+import { Button } from "@mantine/core"; 
+import "./Error404.css";
+
+const Error404 = () => {
+    return (
+        <div className="error-404-container">
+            <h1>404 Not Found</h1>
+            <p>This is not the page you are looking for</p>
+            <Link to="/" style={{ textDecoration: "none" }}>
+                <Button
+                    variant="gradient"
+                    gradient={{ from: "indigo", to: "cyan" }}
+                    style={{ marginTop: "20px", marginBottom: "20px", marginLeft: "auto", marginRight: "auto", display: "block" }}
+                >
+          Come Home ❤️
+                </Button>
+            </Link>
+        </div>
+    );
+};
+
+export default Error404;

src/pages/index.tsx

@@ -1,5 +1,5 @@
 import Landing from "./Landing/Landing";
 import Login from "./Admin/Login/Login";
 import AdminPage from "./Admin/AdminPage";
-
-export { Landing, Login, AdminPage };
+import Error404 from "./Error404/Error404";
+export { Landing, Login, AdminPage, Error404 };

src/utils/Router.tsx

@@ -7,7 +7,7 @@ import {
     Route,
     Routes,
 } from "react-router-dom";
-import { AdminPage, Landing, Login } from "@/pages";
+import { AdminPage, Landing, Login, Error404 } from "@/pages";
 import { mantineTheme } from "./Mantine";
 import AuthProvider, { useAuth } from "@/pages/Admin/AuthProvider";
 
@@ -34,10 +34,12 @@ const Router = () => {
                     <BrowserRouter>
                         <Routes>
                             <Route path="/" element={<Landing />} />
+                            <Route path="/404" element={<Error404 />} />
                             <Route path="/login" element={<Login />} />
                             <Route path="/admin" element={<AdminOnly />}>
                                 <Route path="" element={<AdminPage />} />
                             </Route>
+                            <Route path="*" element={<Navigate replace to="/404" />} />
                         </Routes>
                     </BrowserRouter>
                 </AuthProvider>