Merge pull request #1082 from The-Commit-Company/389-add-404-page-on-…

…web-app

feat: 404 page

frontend/src/App.tsx

@@ -10,6 +10,7 @@ import { Toaster } from 'sonner'
 import { useStickyState } from './hooks/useStickyState'
 import MobileTabsPage from './pages/MobileTabsPage'
 import Cookies from 'js-cookie'
+import { lazy } from 'react'
 
 /** Following keys will not be cached in app cache */
 const NO_CACHE_KEYS = [
@@ -83,6 +84,7 @@ const router = createBrowserRouter(
           </Route> */}
         </Route>
       </Route>
+      <Route path='*' lazy={() => import('./pages/NotFound')} />
     </>
   ), {
   basename: `/${import.meta.env.VITE_BASE_NAME}` ?? '',

frontend/src/pages/NotFound.tsx

@@ -0,0 +1,22 @@
+import { Stack } from '@/components/layout/Stack'
+import { Button, Flex, Heading, Text } from '@radix-ui/themes'
+import { Link } from 'react-router-dom'
+
+type Props = {}
+
+const NotFoundPage = (props: Props) => {
+    return (
+        <Flex className='h-screen w-screen bg-gray-2' align='center' justify='center'>
+            <Stack gap='4'>
+                <Heading as='h1' size='5' className='text-center not-cal'>Page not found.</Heading>
+                <Text>You have ventured too far beyond the wall.</Text>
+
+                <Button variant='ghost' size='3' asChild className='not-cal hover:bg-transparent hover:text-accent-12'>
+                    <Link to='/'>Go Back</Link>
+                </Button>
+            </Stack>
+        </Flex>
+    )
+}
+
+export const Component = NotFoundPage