From b716a17300bd3e562da6d4a6c376e9818df4695f Mon Sep 17 00:00:00 2001
From: RimmaBuzuluk <rimmysya2000@gmail.com>
Date: Mon, 16 Sep 2024 17:25:51 +0300
Subject: [PATCH 1/5] add routers

---
 src/App.tsx                                   | 23 ++++++++++++++-
 src/Root.tsx                                  | 11 +++----
 src/components/Header/Header.tsx              |  5 ++--
 src/components/Header/NavHeader/NavHeader.tsx | 29 ++++++++++++++++---
 src/pages/AccessoriesPage/AccessoriesPage.tsx |  7 +++++
 src/pages/MainPage/MainPage.tsx               |  8 ++---
 src/pages/NotFoundPage/NotFoundPage.tsx       |  4 +--
 src/pages/PhonesPage/PhonesPage.tsx           |  7 +++++
 src/pages/TabletspPage/TabletsPage.tsx        |  7 +++++
 9 files changed, 83 insertions(+), 18 deletions(-)
 create mode 100644 src/pages/AccessoriesPage/AccessoriesPage.tsx
 create mode 100644 src/pages/PhonesPage/PhonesPage.tsx
 create mode 100644 src/pages/TabletspPage/TabletsPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 1fdd31d..ce3e8a4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,27 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
 import { MainPage } from './pages/MainPage';
+import { NotFoundPage } from './pages/NotFoundPage';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+import { PhonesPage } from './pages/PhonesPage/PhonesPage';
+import { TabletsPage } from './pages/TabletspPage/TabletsPage';
+import { AccessoriesPage } from './pages/AccessoriesPage/AccessoriesPage';
 export const App = () => {
-  return <MainPage />;
+  return (
+    <>
+      <Header />
+      <Routes>
+        <Route path="/" element={<MainPage />} />
+        <Route path="/home" element={<Navigate to="/" replace />} />
+        <Route path="/phones" element={<PhonesPage />} />
+        <Route path="/phones/:phoneId" element={<PhonesPage />} />
+        <Route path="/tablets" element={<TabletsPage />} />
+        <Route path="/accessories" element={<AccessoriesPage />} />
+        <Route path="*" element={<NotFoundPage />} />{' '}
+      </Routes>
+      <Footer />
+    </>
+  );
 };
 
 export default App;
diff --git a/src/Root.tsx b/src/Root.tsx
index 25992d9..66f1a81 100644
--- a/src/Root.tsx
+++ b/src/Root.tsx
@@ -1,17 +1,18 @@
 import { StrictMode } from 'react';
-import App from './App';
 import { Provider } from 'react-redux';
 import { store } from './app/store';
-import { HashRouter, Routes, Route } from 'react-router-dom';
+// import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';
+// import { MainPage } from './pages/MainPage';
+// import { NotFoundPage } from './pages/NotFoundPage';
+import App from './App';
+import { HashRouter } from 'react-router-dom';
 
 export const Root = () => {
   return (
     <StrictMode>
       <Provider store={store}>
         <HashRouter>
-          <Routes>
-            <Route path="/" element={<App />}></Route>
-          </Routes>
+          <App />
         </HashRouter>
       </Provider>
     </StrictMode>
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 45d9c8b..504155d 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { NavHeader } from './NavHeader';
 import './Header.scss';
 import logo from '../../img/Logo.png';
+import { NavLink } from 'react-router-dom';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type Props = {};
@@ -10,9 +11,9 @@ export const Header: React.FC<Props> = () => {
   return (
     <header className="header">
       <div className="header__menu">
-        <a href="/">
+        <NavLink to="/home">
           <img className="header__logo" src={logo} />
-        </a>
+        </NavLink>
 
         <NavHeader />
       </div>
diff --git a/src/components/Header/NavHeader/NavHeader.tsx b/src/components/Header/NavHeader/NavHeader.tsx
index 5fbf2a1..a5d2dec 100644
--- a/src/components/Header/NavHeader/NavHeader.tsx
+++ b/src/components/Header/NavHeader/NavHeader.tsx
@@ -1,22 +1,43 @@
 import React from 'react';
 import './NavHeader.scss';
 import { NavLink } from 'react-router-dom';
+import classNames from 'classnames';
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type Props = {};
 
 export const NavHeader: React.FC<Props> = () => {
   return (
     <div className="nav">
-      <NavLink to="/" className="nav__icon nav__icon--active">
+      <NavLink
+        to="/"
+        className={({ isActive }) =>
+          classNames('nav__icon', { 'nav__icon--active': isActive })
+        }
+      >
         home
       </NavLink>
-      <NavLink to="#" className="nav__icon">
+      <NavLink
+        to="/phones"
+        className={({ isActive }) =>
+          classNames('nav__icon', { 'nav__icon--active': isActive })
+        }
+      >
         phones
       </NavLink>
-      <NavLink to="#" className="nav__icon">
+      <NavLink
+        to="/tablets"
+        className={({ isActive }) =>
+          classNames('nav__icon', { 'nav__icon--active': isActive })
+        }
+      >
         tablets
       </NavLink>
-      <NavLink to="#" className="nav__icon">
+      <NavLink
+        to="/accessories"
+        className={({ isActive }) =>
+          classNames('nav__icon', { 'nav__icon--active': isActive })
+        }
+      >
         accessories
       </NavLink>
     </div>
diff --git a/src/pages/AccessoriesPage/AccessoriesPage.tsx b/src/pages/AccessoriesPage/AccessoriesPage.tsx
new file mode 100644
index 0000000..850c19a
--- /dev/null
+++ b/src/pages/AccessoriesPage/AccessoriesPage.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+type Props = {};
+
+export const AccessoriesPage: React.FC<Props> = () => {
+  return <>Accessories page</>;
+};
diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
index 023e334..d70fd07 100644
--- a/src/pages/MainPage/MainPage.tsx
+++ b/src/pages/MainPage/MainPage.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import './MainPage.scss';
 import { Main } from '../../components/Main';
-import { Header } from '../../components/Header';
-import { Footer } from '../../components/Footer';
+// import { Header } from '../../components/Header';
+// import { Footer } from '../../components/Footer';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type Props = {};
@@ -10,10 +10,10 @@ type Props = {};
 export const MainPage: React.FC<Props> = () => {
   return (
     <>
-      <Header />
+      {/* <Header /> */}
       <div className="main-page">
         <Main />
-        <Footer />
+        {/* <Footer /> */}
       </div>
     </>
   );
diff --git a/src/pages/NotFoundPage/NotFoundPage.tsx b/src/pages/NotFoundPage/NotFoundPage.tsx
index 25b24a5..ae64f4b 100644
--- a/src/pages/NotFoundPage/NotFoundPage.tsx
+++ b/src/pages/NotFoundPage/NotFoundPage.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import './NotFoundPage.scss'
+// import './NotFoundPage.scss';
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type Props = {};
 
 export const NotFoundPage: React.FC<Props> = () => {
-  return <></>;
+  return <>page not found</>;
 };
diff --git a/src/pages/PhonesPage/PhonesPage.tsx b/src/pages/PhonesPage/PhonesPage.tsx
new file mode 100644
index 0000000..cc4000f
--- /dev/null
+++ b/src/pages/PhonesPage/PhonesPage.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+type Props = {};
+
+export const PhonesPage: React.FC<Props> = () => {
+  return <>Phones page</>;
+};
diff --git a/src/pages/TabletspPage/TabletsPage.tsx b/src/pages/TabletspPage/TabletsPage.tsx
new file mode 100644
index 0000000..4a57e33
--- /dev/null
+++ b/src/pages/TabletspPage/TabletsPage.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+type Props = {};
+
+export const TabletsPage: React.FC<Props> = () => {
+  return <>Tablets page</>;
+};

From 29d93543b08fa58e3c25290a0f52118371f42b90 Mon Sep 17 00:00:00 2001
From: RimmaBuzuluk <rimmysya2000@gmail.com>
Date: Mon, 16 Sep 2024 18:03:28 +0300
Subject: [PATCH 2/5] add rout

---
 index.html                               |  6 ----
 src/App.tsx                              | 12 ++++---
 src/Root.tsx                             |  5 +--
 src/pages/NotFoundPage/NotFoundPage.scss | 41 ++++++++++++++++++++++++
 src/pages/NotFoundPage/NotFoundPage.tsx  | 24 ++++++++++----
 5 files changed, 67 insertions(+), 21 deletions(-)

diff --git a/index.html b/index.html
index 00837ce..e4b78ea 100644
--- a/index.html
+++ b/index.html
@@ -3,12 +3,6 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
-      rel="stylesheet"
-    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
   </head>
diff --git a/src/App.tsx b/src/App.tsx
index ce3e8a4..4fe148d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,23 +1,25 @@
-import { Navigate, Route, Routes } from 'react-router-dom';
-import { MainPage } from './pages/MainPage';
-import { NotFoundPage } from './pages/NotFoundPage';
 import { Header } from './components/Header';
 import { Footer } from './components/Footer';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { MainPage } from './pages/MainPage';
 import { PhonesPage } from './pages/PhonesPage/PhonesPage';
 import { TabletsPage } from './pages/TabletspPage/TabletsPage';
 import { AccessoriesPage } from './pages/AccessoriesPage/AccessoriesPage';
+import { NotFoundPage } from './pages/NotFoundPage';
+// import { MainPage } from './pages/MainPage';
+
 export const App = () => {
   return (
     <>
       <Header />
       <Routes>
-        <Route path="/" element={<MainPage />} />
+        <Route index element={<MainPage />} />
         <Route path="/home" element={<Navigate to="/" replace />} />
         <Route path="/phones" element={<PhonesPage />} />
         <Route path="/phones/:phoneId" element={<PhonesPage />} />
         <Route path="/tablets" element={<TabletsPage />} />
         <Route path="/accessories" element={<AccessoriesPage />} />
-        <Route path="*" element={<NotFoundPage />} />{' '}
+        <Route path="*" element={<NotFoundPage />} />
       </Routes>
       <Footer />
     </>
diff --git a/src/Root.tsx b/src/Root.tsx
index 66f1a81..b9f1827 100644
--- a/src/Root.tsx
+++ b/src/Root.tsx
@@ -1,11 +1,8 @@
 import { StrictMode } from 'react';
 import { Provider } from 'react-redux';
 import { store } from './app/store';
-// import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';
-// import { MainPage } from './pages/MainPage';
-// import { NotFoundPage } from './pages/NotFoundPage';
-import App from './App';
 import { HashRouter } from 'react-router-dom';
+import App from './App';
 
 export const Root = () => {
   return (
diff --git a/src/pages/NotFoundPage/NotFoundPage.scss b/src/pages/NotFoundPage/NotFoundPage.scss
index e69de29..92ce04a 100644
--- a/src/pages/NotFoundPage/NotFoundPage.scss
+++ b/src/pages/NotFoundPage/NotFoundPage.scss
@@ -0,0 +1,41 @@
+.not-found {
+  grid-column: 1 / -1;
+
+  &__title {
+    font-size: pxToRem(20);
+    font-weight: 780;
+    margin-top: 16px;
+    margin-bottom: 4px;
+
+    @include onTablet {
+      font-size: pxToRem(30);
+      margin-top: 16px;
+      font-weight: 800;
+      margin-bottom: 8px;
+    }
+
+    @include onDesktop {
+      color: $primary-color;
+      font-size: pxToRem(32);
+      line-height: 41px;
+      letter-spacing: -1px;
+      font-weight: 800;
+      margin-top: 16px;
+      margin-bottom: 16px;
+    }
+  }
+
+  &__description {
+    color: $secondary-color;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 21px;
+    margin-bottom: 14px;
+  }
+
+  &__link {
+    color: $primary-color;
+    display: inline-block;
+    font-weight: 700;
+  }
+}
diff --git a/src/pages/NotFoundPage/NotFoundPage.tsx b/src/pages/NotFoundPage/NotFoundPage.tsx
index ae64f4b..8d89a69 100644
--- a/src/pages/NotFoundPage/NotFoundPage.tsx
+++ b/src/pages/NotFoundPage/NotFoundPage.tsx
@@ -1,8 +1,20 @@
-import React from 'react';
-// import './NotFoundPage.scss';
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-type Props = {};
+import './NotFoundPage.scss';
+import { Link } from 'react-router-dom';
 
-export const NotFoundPage: React.FC<Props> = () => {
-  return <>page not found</>;
+export const NotFoundPage = () => {
+  return (
+    <div className="not-found">
+      <h2 className="not-found__title">404 - Page not found</h2>
+      <p className="not-found__description">
+        Sorry, the page you are looking for does not exist. To return to home
+        page, click{` `}
+        <Link to="/" className="not-found__link">
+          here
+        </Link>
+        .
+      </p>
+    </div>
+  );
 };
+
+export default NotFoundPage;

From 6a4babd23c0f4b0f9ec200b9880946eeb242b73f Mon Sep 17 00:00:00 2001
From: RimmaBuzuluk <rimmysya2000@gmail.com>
Date: Tue, 17 Sep 2024 14:41:26 +0300
Subject: [PATCH 3/5] add App.tsx

---
 src/App.tsx | 19 +++----------------
 1 file changed, 3 insertions(+), 16 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4fe148d..6057ea4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,26 +1,13 @@
 import { Header } from './components/Header';
 import { Footer } from './components/Footer';
-import { Navigate, Route, Routes } from 'react-router-dom';
-import { MainPage } from './pages/MainPage';
-import { PhonesPage } from './pages/PhonesPage/PhonesPage';
-import { TabletsPage } from './pages/TabletspPage/TabletsPage';
-import { AccessoriesPage } from './pages/AccessoriesPage/AccessoriesPage';
-import { NotFoundPage } from './pages/NotFoundPage';
-// import { MainPage } from './pages/MainPage';
+import { Outlet } from 'react-router-dom';
 
 export const App = () => {
   return (
     <>
       <Header />
-      <Routes>
-        <Route index element={<MainPage />} />
-        <Route path="/home" element={<Navigate to="/" replace />} />
-        <Route path="/phones" element={<PhonesPage />} />
-        <Route path="/phones/:phoneId" element={<PhonesPage />} />
-        <Route path="/tablets" element={<TabletsPage />} />
-        <Route path="/accessories" element={<AccessoriesPage />} />
-        <Route path="*" element={<NotFoundPage />} />
-      </Routes>
+      <Outlet />
+
       <Footer />
     </>
   );

From 7f279c95221c05bb3156caf882f1c62daaedfc67 Mon Sep 17 00:00:00 2001
From: RimmaBuzuluk <rimmysya2000@gmail.com>
Date: Tue, 17 Sep 2024 14:42:33 +0300
Subject: [PATCH 4/5] add Root.tsx

---
 src/Root.tsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/Root.tsx b/src/Root.tsx
index b9f1827..ae4263f 100644
--- a/src/Root.tsx
+++ b/src/Root.tsx
@@ -1,15 +1,34 @@
 import { StrictMode } from 'react';
 import { Provider } from 'react-redux';
 import { store } from './app/store';
-import { HashRouter } from 'react-router-dom';
+import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
 import App from './App';
+import { MainPage } from './pages/MainPage';
+// import { PhonesPage } from './pages/PhonesPage/PhonesPage';
+import { TabletsPage } from './pages/TabletspPage/TabletsPage';
+import { AccessoriesPage } from './pages/AccessoriesPage/AccessoriesPage';
+import { NotFoundPage } from './pages/NotFoundPage';
+import { PhonesPage } from './pages/PhonesPage/PhonesPage';
 
 export const Root = () => {
   return (
     <StrictMode>
       <Provider store={store}>
         <HashRouter>
-          <App />
+          <Routes>
+            <Route path="/" element={<App />}>
+              <Route index element={<MainPage />} />
+              <Route path="home" element={<Navigate to="/" replace />} />
+              <Route path="phones">
+                <Route path=":phoneId?" element={<PhonesPage />} />
+              </Route>
+
+              <Route path="tablets" element={<TabletsPage />} />
+              <Route path="accessories" element={<AccessoriesPage />} />
+              {/* <Route path="cart" element={<CartPag />} /> */}
+              <Route path="*" element={<NotFoundPage />} />
+            </Route>
+          </Routes>
         </HashRouter>
       </Provider>
     </StrictMode>

From 37b5b7b817f47d97ad8f511e684ee9ccf5e30849 Mon Sep 17 00:00:00 2001
From: RimmaBuzuluk <rimmysya2000@gmail.com>
Date: Tue, 17 Sep 2024 16:30:57 +0300
Subject: [PATCH 5/5] add function

---
 .../Header/NavHeader/NavHeader.scss           |  2 +-
 src/components/Header/NavHeader/NavHeader.tsx | 30 ++++---------------
 2 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/src/components/Header/NavHeader/NavHeader.scss b/src/components/Header/NavHeader/NavHeader.scss
index 5a0cfb0..12fa503 100644
--- a/src/components/Header/NavHeader/NavHeader.scss
+++ b/src/components/Header/NavHeader/NavHeader.scss
@@ -38,7 +38,7 @@
         bottom: -18px;
       }
       @include onDesktop {
-        bottom: -26px;
+        bottom: -28px;
       }
       background-color: #000;
     }
diff --git a/src/components/Header/NavHeader/NavHeader.tsx b/src/components/Header/NavHeader/NavHeader.tsx
index a5d2dec..4696b15 100644
--- a/src/components/Header/NavHeader/NavHeader.tsx
+++ b/src/components/Header/NavHeader/NavHeader.tsx
@@ -6,38 +6,20 @@ import classNames from 'classnames';
 type Props = {};
 
 export const NavHeader: React.FC<Props> = () => {
+  const getNavLinkClass = ({ isActive }: { isActive: boolean }) =>
+    classNames('nav__icon', { 'nav__icon--active': isActive });
   return (
     <div className="nav">
-      <NavLink
-        to="/"
-        className={({ isActive }) =>
-          classNames('nav__icon', { 'nav__icon--active': isActive })
-        }
-      >
+      <NavLink to="/" className={getNavLinkClass}>
         home
       </NavLink>
-      <NavLink
-        to="/phones"
-        className={({ isActive }) =>
-          classNames('nav__icon', { 'nav__icon--active': isActive })
-        }
-      >
+      <NavLink to="/phones" className={getNavLinkClass}>
         phones
       </NavLink>
-      <NavLink
-        to="/tablets"
-        className={({ isActive }) =>
-          classNames('nav__icon', { 'nav__icon--active': isActive })
-        }
-      >
+      <NavLink to="/tablets" className={getNavLinkClass}>
         tablets
       </NavLink>
-      <NavLink
-        to="/accessories"
-        className={({ isActive }) =>
-          classNames('nav__icon', { 'nav__icon--active': isActive })
-        }
-      >
+      <NavLink to="/accessories" className={getNavLinkClass}>
         accessories
       </NavLink>
     </div>