From b18783f64236afda6b15c38246ee710d73a31af2 Mon Sep 17 00:00:00 2001
From: Alejandra <90076947+alejsdev@users.noreply.github.com>
Date: Tue, 13 Feb 2024 15:06:57 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20`Not=20Found`=20page=20(#595)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/new-frontend/src/App.tsx            |  5 ++++-
 src/new-frontend/src/pages/NotFound.tsx | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 src/new-frontend/src/pages/NotFound.tsx

diff --git a/src/new-frontend/src/App.tsx b/src/new-frontend/src/App.tsx
index 6bbd728..e9d6216 100644
--- a/src/new-frontend/src/App.tsx
+++ b/src/new-frontend/src/App.tsx
@@ -1,13 +1,15 @@
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 
+import { ChakraProvider, extendTheme } from '@chakra-ui/react';
+
 import Layout from './pages/Layout';
+import NotFound from './pages/NotFound';
 import Login from './pages/auth/Login';
 import RecoverPassword from './pages/auth/RecoverPassword';
 import Admin from './pages/main/Admin';
 import Dashboard from './pages/main/Dashboard';
 import Items from './pages/main/Items';
 import Profile from './pages/main/Profile';
-import { ChakraProvider, extendTheme } from '@chakra-ui/react';
 
 // Theme
 const theme = extendTheme({
@@ -48,6 +50,7 @@ function App() {
               <Route path="/items" element={<Items />} />
               <Route path="/admin" element={<Admin />} />
             </Route>
+            <Route path="*" element={<NotFound />} />
           </Routes>
         </ ChakraProvider>
       </Router>
diff --git a/src/new-frontend/src/pages/NotFound.tsx b/src/new-frontend/src/pages/NotFound.tsx
new file mode 100644
index 0000000..b6f5dee
--- /dev/null
+++ b/src/new-frontend/src/pages/NotFound.tsx
@@ -0,0 +1,18 @@
+import { Button, Container, Text } from "@chakra-ui/react";
+
+import { Link } from "react-router-dom";
+
+const NotFound = () => (
+    <>
+        <Container h="100vh"
+            alignItems="stretch"
+            justifyContent="center" textAlign="center" maxW="xs" centerContent>
+            <Text fontSize="8xl" color="ui.main" fontWeight="bold" lineHeight="1" mb={4}>404</Text>
+            <Text fontSize="md">Houston, we have a problem.</Text>
+            <Text fontSize="md">It looks like the page you're looking for doesn't exist.</Text>
+            <Button as={Link} to="/" color="ui.main" borderColor="ui.main" variant="outline" mt={4}>Go back to Home</Button>
+        </Container>
+    </>
+);
+
+export default NotFound;