From 3d44fa69cc7d499d75d148af8a2b8093531d2b9f Mon Sep 17 00:00:00 2001
From: Matheus Patriota <mpatriota55@gmail.com>
Date: Wed, 7 Dec 2022 22:53:26 -0300
Subject: [PATCH] feature: new 404 page created in react, you can change the
 default route in router.js to use in your project, need adjust to work 100%

---
 src/pages/NotFoundPage/index.jsx | 22 ++++++++++++++++++
 src/pages/NotFoundPage/style.css | 39 ++++++++++++++++++++++++++++++++
 src/router.js                    |  2 ++
 3 files changed, 63 insertions(+)
 create mode 100644 src/pages/NotFoundPage/index.jsx
 create mode 100644 src/pages/NotFoundPage/style.css

diff --git a/src/pages/NotFoundPage/index.jsx b/src/pages/NotFoundPage/index.jsx
new file mode 100644
index 0000000..bb074c6
--- /dev/null
+++ b/src/pages/NotFoundPage/index.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+import "./style.css";
+import nameLogo from "../../assets/queplanta-text-dark.svg";
+import leafLogo from "../../assets/logo-queplanta.png";
+
+export function NotFoundPage() {
+  return (
+    <div className="container">
+      <div className="logoContainer">
+        <img src={leafLogo} alt="" width={"80px"} />
+        <img src={nameLogo} alt="" />
+      </div>
+      <div className="messageContainer">
+        <h1>404</h1>
+        <p>Pagina não encontrada</p>
+      </div>
+      <div className="buttonContainer">
+        <button>Voltar para a página inicial</button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/NotFoundPage/style.css b/src/pages/NotFoundPage/style.css
new file mode 100644
index 0000000..e111525
--- /dev/null
+++ b/src/pages/NotFoundPage/style.css
@@ -0,0 +1,39 @@
+.container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.logoContainer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
+.messageContainer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.buttonContainer button {
+  height: 40px;
+  cursor: pointer;
+  border: none;
+  background-color: #009348;
+  color: #fff;
+  border-radius: 5px;
+
+  font-weight: bold;
+}
+.buttonContainer button:hover {
+  opacity: 0.8;
+}
diff --git a/src/router.js b/src/router.js
index c68d518..af2fb25 100644
--- a/src/router.js
+++ b/src/router.js
@@ -16,6 +16,7 @@ import { revisionsRoutes } from "./revisions/routes.js";
 
 import OccurrencePlate from "./occurrences/OccurrencePlate.js";
 import OccurrencePlateQuery from "./occurrences/OccurrencePlate.query.js";
+import { NotFoundPage } from "./pages/NotFoundPage/index.jsx";
 
 export const historyMiddlewares = [queryMiddleware];
 
@@ -46,6 +47,7 @@ export const routeConfig = makeRouteConfig(
       {/*needs to be last one*/}
       {pagesRoutes}
     </Route>
+    <Route path="*" Component={NotFoundPage} />
   </React.Fragment>
 );