From ee65bc960786987d5b60d58a92e39032250a49c6 Mon Sep 17 00:00:00 2001
From: DianaKryzhanivska <di_parkhomenko@ukr.net>
Date: Sun, 31 Mar 2024 12:56:13 +0300
Subject: [PATCH] NotFound page

---
 src/components/App.jsx                     |  2 ++
 src/components/NotFound/NotFound.jsx       | 19 ++++++++++
 src/components/NotFound/NotFound.styled.js | 42 ++++++++++++++++++++++
 src/pages/NotFoundPage.jsx                 | 12 +++++++
 4 files changed, 75 insertions(+)
 create mode 100644 src/components/NotFound/NotFound.jsx
 create mode 100644 src/components/NotFound/NotFound.styled.js
 create mode 100644 src/pages/NotFoundPage.jsx

diff --git a/src/components/App.jsx b/src/components/App.jsx
index 8596112..bfe9f94 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -11,6 +11,7 @@ import { useEffect } from "react";
 import { currentUserThunk } from "../redux/auth/operations";
 import { selectIsRefresh } from "../redux/auth/selectors";
 import PrivateRoute from "routes/PrivateRoute";
+import NotFoundPage from "pages/NotFoundPage";
 
 export const App = () => {
   const dispatch = useDispatch();
@@ -55,6 +56,7 @@ export const App = () => {
               }
             />
           </Route>
+          <Route path="*" element={<NotFoundPage />} />
         </Routes>
       )}
     </>
diff --git a/src/components/NotFound/NotFound.jsx b/src/components/NotFound/NotFound.jsx
new file mode 100644
index 0000000..affa471
--- /dev/null
+++ b/src/components/NotFound/NotFound.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { Container, NavLinkStyled, Wrapper } from "./NotFound.styled";
+
+const NotFound = () => {
+  return (
+    <>
+      <Container>
+        <Wrapper>
+          <h3>Page Not Found</h3>
+          <p>
+            You can go to <NavLinkStyled to="/login">login</NavLinkStyled>
+          </p>
+        </Wrapper>
+      </Container>
+    </>
+  );
+};
+
+export default NotFound;
diff --git a/src/components/NotFound/NotFound.styled.js b/src/components/NotFound/NotFound.styled.js
new file mode 100644
index 0000000..a5d2811
--- /dev/null
+++ b/src/components/NotFound/NotFound.styled.js
@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import { NavLink } from "react-router-dom";
+
+export const Container = styled.div`
+  height: 100vh;
+  background: ${({ theme }) => theme.colors.green};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  justify-content: center;
+
+  & h3 {
+    color: ${({ theme }) => theme.colors.white};
+    font-size: 22px;
+    font-weight: 600;
+    text-align: center;
+  }
+
+  & p {
+    font-size: 18px;
+    color: ${({ theme }) => theme.colors.white};
+  }
+`;
+
+export const NavLinkStyled = styled(NavLink)`
+  background: ${({ theme }) => theme.colors.white};
+  color: ${({ theme }) => theme.colors.green};
+  padding: 5px 20px;
+  border-radius: 15px;
+  font-size: 18px;
+  font-weight: 600;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.black};
+  }
+`;
diff --git a/src/pages/NotFoundPage.jsx b/src/pages/NotFoundPage.jsx
new file mode 100644
index 0000000..ed0f229
--- /dev/null
+++ b/src/pages/NotFoundPage.jsx
@@ -0,0 +1,12 @@
+import NotFound from "components/NotFound/NotFound";
+import React from "react";
+
+const NotFoundPage = () => {
+  return (
+    <>
+      <NotFound />
+    </>
+  );
+};
+
+export default NotFoundPage;