From 46fe56eb628a0afaf821c8347be38180a41d06e1 Mon Sep 17 00:00:00 2001
From: Santiago Fleitas <sansfleitas@gmail.com>
Date: Sun, 12 Nov 2023 22:24:15 -0300
Subject: [PATCH] Create Error Page - Not Found

---
 src/pages/Error/index.tsx | 15 +++++++--------
 src/pages/Error/styles.ts | 10 ++++++++++
 src/routes/index.tsx      |  2 ++
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/pages/Error/index.tsx b/src/pages/Error/index.tsx
index 66bf9f7..5a04b7d 100644
--- a/src/pages/Error/index.tsx
+++ b/src/pages/Error/index.tsx
@@ -1,17 +1,16 @@
-import { useRouteError } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { Container } from './styles';
 
-export default function ErrorPage() {
-  const error = useRouteError() as Error & { statusText?: string };
-  console.error(error);
+import gameHubLogo from '@assets/logo/logo-white-removebg-preview.png';
 
+export default function ErrorPage() {
   return (
     <Container>
+      <Link to="/">
+        <img src={gameHubLogo} alt="Logotipo" width={100} height={100} />
+      </Link>
       <h1>Oops!</h1>
-      <p>Sorry, an unexpected error has occurred.</p>
-      <p>
-        <i>{error.statusText || error.message}</i>
-      </p>
+      <p>Página não encontrada.</p>
     </Container>
   );
 }
diff --git a/src/pages/Error/styles.ts b/src/pages/Error/styles.ts
index c9379b4..7f07920 100644
--- a/src/pages/Error/styles.ts
+++ b/src/pages/Error/styles.ts
@@ -9,4 +9,14 @@ export const Container = styled.div`
     align-items: center;
     justify-content: center;
     gap: 1rem;
+
+    img {
+      width: 200px;
+      height: 200px;
+      transition: filter 0.3s;
+    }
+
+    img:hover {
+      filter: brightness(70%);
+    }
 `;
\ No newline at end of file
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 0bfab1b..4441053 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -5,6 +5,7 @@ import Lists from '../pages/Lists';
 import Login from '../pages/Login';
 import Register from '../pages/Register';
 import Game from '../pages/Game';
+import ErrorPage from '../pages/Error';
 import { PrivateRoute } from './privateRoutes';
 
 export const AppRouter = () => {
@@ -18,6 +19,7 @@ export const AppRouter = () => {
         <Route path="/lists" element={<PrivateRoute />}>
           <Route path="/lists" element={<Lists />} />
         </Route>
+        <Route path="*" element={<ErrorPage />} />
       </Routes>
     </Router>
   );