Merge pull request #24 from GuilhermeFreire-Dev/22-feature-pagina-par…

…a-conteúdo-ausente

Feature Página Conteúdo Ausente

src/App.js

@@ -1,22 +1,32 @@
 import './assets/css/App.css';
 import './index.css';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Route, Router, RouterProvider, Routes, createBrowserRouter } from 'react-router-dom';
 import Home from './components/view/Home';
 import Navegar from './components/view/Navegar';
 import Game from './components/view/Game';
+import NoContent from './components/view/NoContent';
 
 function App() {
+
+  const router = createBrowserRouter([
+    {
+      path: "/",
+      element: <Home></Home>,
+      errorElement: <NoContent></NoContent>
+    },
+    {
+      path: "/navegar",
+      element: <Navegar></Navegar>
+    },
+    {
+      path: "/game/:id",
+      element: <Game></Game>
+    }
+  ]);
+
   return (
     <div className="App bg-stone-900 text-white">
-      <BrowserRouter>
-        <Routes>
-          <Route>
-            <Route index element={<Home></Home>}></Route>
-            <Route path='navegar' element={<Navegar></Navegar>}></Route>
-            <Route path='game/:id' element={<Game></Game>} ></Route>
-          </Route>
-        </Routes>
-      </BrowserRouter>
+      <RouterProvider router={router}></RouterProvider>
     </div>
   );
 }

src/components/view/NoContent.jsx

@@ -0,0 +1,15 @@
+
+function NoContent() {
+  return (
+    <div className="h-screen flex flex-col items-center justify-center text-center">
+      <div>
+        <h1 className="font-bold text-5xl mb-5">{ "Opss!" }</h1>
+        <h2 className="font-semibold text-2xl mb-3" >{ "Não encontramos a página que você procurava :(" }</h2>
+      </div>
+      <p className="text-stone-400 mb-8">{ "404 Not Found" }</p>
+      <a className="bg-stone-700 pt-3 pr-5 pb-3 pl-5 rounded-xl hover:bg-stone-500" href="/">{ "Voltar a página inicial" }</a>
+    </div>
+  );
+}
+
+export default NoContent;