add filter form

package.json

@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.9.12",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",

src/App.css

@@ -0,0 +1,3 @@
+iframe {
+  display: none;
+}/*# sourceMappingURL=App.css.map */

src/App.tsx

@@ -1,20 +1,28 @@
-import { PeoplePage } from './components/PeoplePage';
 import { Navbar } from './components/Navbar';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { HomePage } from './components/HomePage';
+import { PeoplePage } from './components/PeoplePage';
+import { NotFoundPage } from './components/NotFoundPage/NotFoundPage';
+import { HashRouter } from 'react-router-dom';
 
 import './App.scss';
 
-export const App = () => {
-  return (
+export const App = () => (
+  <HashRouter>
     <div data-cy="app">
       <Navbar />
 
-      <div className="section">
+      <main className="section">
         <div className="container">
-          <h1 className="title">Home Page</h1>
-          <h1 className="title">Page not found</h1>
-          <PeoplePage />
+          <Routes>
+            <Route path="/" element={<HomePage />}></Route>
+            <Route path="/home" element={<Navigate to="/" replace />}></Route>
+            <Route path="people" element={<PeoplePage />} />
+            <Route path="people/:slug" element={<PeoplePage />} />
+            <Route path="*" element={<NotFoundPage />}></Route>
+          </Routes>
         </div>
-      </div>
+      </main>
     </div>
-  );
-};
+  </HashRouter>
+);

src/components/HomePage/HomePage.tsx

@@ -0,0 +1,3 @@
+export const HomePage = () => {
+  return <h1 className="title">Home Page</h1>;
+};

src/components/HomePage/index.ts

@@ -0,0 +1 @@
+export * from './HomePage';

src/components/Loader/Loader.css

@@ -0,0 +1,25 @@
+.Loader {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.Loader__content {
+  border-radius: 50%;
+  width: 2em;
+  height: 2em;
+  margin: 1em auto;
+  border: 0.3em solid #ddd;
+  border-left-color: #000;
+  animation: load8 1.2s infinite linear;
+}
+
+@keyframes load8 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/components/Navbar/Navbar.tsx

@@ -0,0 +1,39 @@
+import { NavLink } from 'react-router-dom';
+
+export const Navbar = () => {
+  return (
+    <nav
+      data-cy="nav"
+      className="navbar is-fixed-top has-shadow"
+      role="navigation"
+      aria-label="main navigation"
+    >
+      <div className="container">
+        <div className="navbar-brand">
+          <NavLink
+            className={({ isActive }) =>
+              isActive
+                ? 'navbar-item has-background-grey-lighter'
+                : 'navbar-item'
+            }
+            end
+            to="/"
+          >
+            Home
+          </NavLink>
+
+          <NavLink
+            className={({ isActive }) =>
+              isActive
+                ? 'navbar-item has-background-grey-lighter'
+                : 'navbar-item'
+            }
+            to="people"
+          >
+            People
+          </NavLink>
+        </div>
+      </div>
+    </nav>
+  );
+};

src/components/Navbar/index.ts

@@ -0,0 +1 @@
+export * from './Navbar';

src/components/NotFoundPage/NotFoundPage.tsx

@@ -0,0 +1,3 @@
+export const NotFoundPage = () => {
+  return <h1 className="title">Page not found</h1>;
+};

src/components/NotFoundPage/index.ts

@@ -0,0 +1 @@
+export * from './NotFoundPage';