Merge pull request #17 from chrisvasqm/feature/add-error-page

Add error page

src/components/ErrorPage.tsx

@@ -0,0 +1,20 @@
+import { Button, Center, Heading, Text, VStack } from "@chakra-ui/react"
+import { Link } from "react-router-dom"
+import NavBar from "./NavBar"
+
+const ErrorPage = () => {
+    return (
+        <>
+            <NavBar />
+            <Center height={'100vh'}>
+                <VStack>
+                    <Heading>Oops!</Heading>
+                    <Text>Seems like you have lost your way</Text>
+                    <Link to={'/pokemons'}><Button>Go Home</Button></Link>
+                </VStack>
+            </Center>
+        </>
+    )
+}
+
+export default ErrorPage

src/router.tsx

@@ -2,11 +2,13 @@ import { createBrowserRouter } from 'react-router-dom'
 import Layout from './Layout'
 import PokemonDetail from './components/pokemon/PokemonDetail'
 import PokemonsContainer from './components/pokemon/PokemonContainer'
+import ErrorPage from './components/ErrorPage'
 
 const router = createBrowserRouter([
     {
         path: '/',
         element: <Layout />,
+        errorElement: <ErrorPage />,
         children: [
             { path: '/pokemons', element: <PokemonsContainer /> },
             { path: '/pokemons/:id', element: <PokemonDetail /> }