Merge pull request #10 from fs-jun24-team-3/feature/add-router

Feature/add router

src/App.tsx

@@ -1,6 +1,16 @@
-import { MainPage } from './pages/MainPage';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+import { Outlet } from 'react-router-dom';
+
 export const App = () => {
-  return <MainPage />;
+  return (
+    <>
+      <Header />
+      <Outlet />
+
+      <Footer />
+    </>
+  );
 };
 
 export default App;

src/Root.tsx

@@ -1,9 +1,14 @@
 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, 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 (
@@ -12,6 +17,15 @@ export const Root = () => {
         <HashRouter>
           <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>

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>

src/components/Header/NavHeader/NavHeader.scss

@@ -41,7 +41,7 @@
       }
 
       @include onDesktop {
-        bottom: -26px;
+        bottom: -28px;
       }
 
       background-color: #000;

src/components/Header/NavHeader/NavHeader.tsx

@@ -1,22 +1,25 @@
 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> = () => {
+  const getNavLinkClass = ({ isActive }: { isActive: boolean }) =>
+    classNames('nav__icon', { 'nav__icon--active': isActive });
   return (
     <div className="nav">
-      <NavLink to="/" className="nav__icon nav__icon--active">
+      <NavLink to="/" className={getNavLinkClass}>
         home
       </NavLink>
-      <NavLink to="#" className="nav__icon">
+      <NavLink to="/phones" className={getNavLinkClass}>
         phones
       </NavLink>
-      <NavLink to="#" className="nav__icon">
+      <NavLink to="/tablets" className={getNavLinkClass}>
         tablets
       </NavLink>
-      <NavLink to="#" className="nav__icon">
+      <NavLink to="/accessories" className={getNavLinkClass}>
         accessories
       </NavLink>
     </div>

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</>;
+};

src/pages/MainPage/MainPage.tsx

@@ -1,21 +1,18 @@
 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 = {};
 
 export const MainPage: React.FC<Props> = () => {
   return (
     <>
-      <Header />
       <div className="main-page">
         <Main />
       </div>
-
-      <Footer />
     </>
   );
 };

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</>;
+};

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</>;
+};