From 3e2c13a22e98b147ff4cf247f94b7c8081b77b8e Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Fri, 19 Apr 2024 19:48:47 +0100
Subject: [PATCH] add 404 error page

---
 apps/client/src/App.tsx                       |  2 ++
 .../src/components/ui/error-404.module.css    | 24 +++++++++++++++++++
 apps/client/src/components/ui/error-404.tsx   | 19 +++++++++++++++
 3 files changed, 45 insertions(+)
 create mode 100644 apps/client/src/components/ui/error-404.module.css
 create mode 100644 apps/client/src/components/ui/error-404.tsx

diff --git a/apps/client/src/App.tsx b/apps/client/src/App.tsx
index 7fb5c59d..0b2b7d75 100644
--- a/apps/client/src/App.tsx
+++ b/apps/client/src/App.tsx
@@ -12,6 +12,7 @@ import WorkspaceSettings from "@/pages/settings/workspace/workspace-settings";
 import Groups from "@/pages/settings/group/groups";
 import GroupInfo from "./pages/settings/group/group-info";
 import Spaces from "@/pages/settings/space/spaces.tsx";
+import { Error404 } from "@/components/ui/error-404.tsx";
 
 export default function App() {
   return (
@@ -34,6 +35,7 @@ export default function App() {
           <Route path={"groups/:groupId"} element={<GroupInfo />} />
           <Route path={"spaces"} element={<Spaces />} />
         </Route>
+        <Route path="*" element={<Error404 />} />
       </Routes>
     </>
   );
diff --git a/apps/client/src/components/ui/error-404.module.css b/apps/client/src/components/ui/error-404.module.css
new file mode 100644
index 00000000..6f16db0e
--- /dev/null
+++ b/apps/client/src/components/ui/error-404.module.css
@@ -0,0 +1,24 @@
+.root {
+  padding-top: 80px;
+  padding-bottom: 80px;
+}
+
+.description {
+  max-width: 500px;
+  margin: auto;
+  margin-top: var(--mantine-spacing-xl);
+  margin-bottom: calc(1.5 * var(--mantine-spacing-xl));
+}
+
+.title {
+  font-family:
+    Greycliff CF,
+    var(--mantine-font-family);
+  text-align: center;
+  font-weight: 600;
+  font-size: 30px;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: 25px;
+  }
+}
diff --git a/apps/client/src/components/ui/error-404.tsx b/apps/client/src/components/ui/error-404.tsx
new file mode 100644
index 00000000..86573298
--- /dev/null
+++ b/apps/client/src/components/ui/error-404.tsx
@@ -0,0 +1,19 @@
+import { Title, Text, Button, Container, Group } from "@mantine/core";
+import classes from "./error-404.module.css";
+import { Link } from "react-router-dom";
+
+export function Error404() {
+  return (
+    <Container className={classes.root}>
+      <Title className={classes.title}>404 Page Not Found</Title>
+      <Text c="dimmed" size="lg" ta="center" className={classes.description}>
+        Sorry, we can't find the page you are looking for.
+      </Text>
+      <Group justify="center">
+        <Button component={Link} to={"/home"} variant="subtle" size="md">
+          Take me back to homepage
+        </Button>
+      </Group>
+    </Container>
+  );
+}