solution

.eslintrc.cjs

@@ -4,6 +4,7 @@ module.exports = {
     es2024: true,
   },
   extends: [
+    "prettier",
     'plugin:react/recommended',
     "plugin:react-hooks/recommended",
     'airbnb-typescript',
@@ -16,6 +17,7 @@ module.exports = {
     {
       'files': ['**/*.spec.jsx'],
       'rules': {
+        'indent': 'off',
         'react/jsx-filename-extension': ['off'],
       }
     }
@@ -38,6 +40,7 @@ module.exports = {
   ],
   rules: {
     // JS
+    'indent': 'off',
     'semi': 'off',
     '@typescript-eslint/semi': ['error', 'always'],
     'prefer-const': 2,

.prettierrc

@@ -7,5 +7,6 @@
   "printWidth": 80,
   "semi": true,
   "bracketSpacing": true,
-  "bracketSameLine": false
+  "bracketSameLine": false,
+  "useTabs": false
 }

README.md

@@ -28,4 +28,4 @@ implement the ability to filter and sort people in the table.
 - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
 - Open one more terminal and run tests with `npm test` to ensure your solution is correct.
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_people-table-advanced/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_people-table-advanced/) and add it to the PR description.   

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",
@@ -28,7 +28,7 @@
     "cypress": "^13.13.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-typescript": "^18.0.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^9.1.2",
     "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",
@@ -39,7 +39,7 @@
     "mochawesome": "^7.1.3",
     "mochawesome-merge": "^4.3.0",
     "mochawesome-report-generator": "^6.2.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.8.3",
     "sass": "^1.77.8",
     "stylelint": "^16.7.0",
     "typescript": "^5.2.2",

src/App.tsx

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

src/components/Navbar.tsx

@@ -1,4 +1,13 @@
+import { NavLink, useLocation } from 'react-router-dom';
+
 export const Navbar = () => {
+  const location = useLocation();
+  const peopleLink =
+    location.pathname === '/people' ? `/people${location.search}` : '/people';
+
+  const linkClass = (isActive: boolean) =>
+    `navbar-item${isActive ? ' has-background-grey-lighter' : ''}`;
+
   return (
     <nav
       data-cy="nav"
@@ -8,17 +17,16 @@ export const Navbar = () => {
     >
       <div className="container">
         <div className="navbar-brand">
-          <a className="navbar-item" href="#/">
+          <NavLink end to="/" className={({ isActive }) => linkClass(isActive)}>
             Home
-          </a>
+          </NavLink>
 
-          <a
-            aria-current="page"
-            className="navbar-item has-background-grey-lighter"
-            href="#/people"
+          <NavLink
+            to={peopleLink}
+            className={({ isActive }) => linkClass(isActive)}
           >
             People
-          </a>
+          </NavLink>
         </div>
       </div>
     </nav>