Added a custom 404 not found page

arc53 · Oct 20, 2023 · a245383 · a245383
1 parent 641e75b
commit a245383
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -2,6 +2,7 @@ import { Routes, Route } from 'react-router-dom';
 import Navigation from './Navigation';
 import Conversation from './conversation/Conversation';
 import About from './About';
+import PageNotFound from './PageNotFound';
 import { inject } from '@vercel/analytics';
 import { useMediaQuery } from './hooks';
 import { useState } from 'react';
@@ -25,6 +26,7 @@ export default function App() {
         <Routes>
           <Route path="/" element={<Conversation />} />
           <Route path="/about" element={<About />} />
+          <Route path="*" element={<PageNotFound />} />
         </Routes>
       </div>
     </div>

diff --git a/frontend/src/PageNotFound.tsx b/frontend/src/PageNotFound.tsx
@@ -0,0 +1,15 @@
+import { Link } from 'react-router-dom';
+
+export default function PageNotFound() {
+  return (
+    <div className="mx-5 grid min-h-screen md:mx-36">
+      <p className="mx-auto my-auto mt-20 flex w-full max-w-6xl flex-col place-items-center gap-6 rounded-3xl bg-gray-100 p-6 text-jet lg:p-10 xl:p-16">
+        <h1>404</h1>
+        <p>The page you are looking for does not exist.</p>
+        <button className="pointer-cursor mr-4 flex cursor-pointer items-center justify-center rounded-full bg-blue-1000 py-2 px-4 text-white hover:bg-blue-3000">
+          <Link to="/">Go Back Home</Link>
+        </button>
+      </p>
+    </div>
+  );
+}