solution

src/App.tsx

@@ -1,20 +1,36 @@
-import { PeoplePage } from './components/PeoplePage';
-import { Navbar } from './components/Navbar';
-
+import { Navigate, createHashRouter, RouterProvider } from 'react-router-dom';
 import './App.scss';
+import Home from './pages/HomePage';
+import RootLayout from './pages/Root';
+import ErrorPage from './pages/Error';
+import PeoplePage from './pages/People';
+
+const router = createHashRouter([{
+  path: '/',
+  element: <RootLayout />,
+  errorElement: <ErrorPage />,
+  children: [
+    { path: '/', element: <Home /> },
+    { path: '/home', element: <Navigate to="/" replace /> },
+    {
+      path: '/people',
+      element: <PeoplePage />,
+      children: [
+        { path: ':slug', element: <PeoplePage /> },
+      ],
+    },
+  ],
+}]);
 
-export const App = () => {
+function 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 />
-        </div>
+    <>
+      <div data-cy="app">
+        <RouterProvider router={router} />
       </div>
-    </div>
+    </>
   );
-};
+}
+
+export default App;

src/api.ts

@@ -7,7 +7,7 @@ function wait(delay: number) {
   return new Promise(resolve => setTimeout(resolve, delay));
 }
 
-export async function getPeople(): Promise<Person[]> {
+export function getPeople(): Promise<Person[]> {
   // keep this delay for testing purpose
   return wait(500)
     .then(() => fetch(API_URL))

src/components/Navigation/Navigation.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import { NavLink } from 'react-router-dom';
+
+function MainNavigation() {
+  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 }) => classNames(
+                'navbar-item', { 'has-background-grey-lighter': isActive },
+              )}
+              to="/"
+            >
+              Home
+            </NavLink>
+            <NavLink
+              className={({ isActive }) => classNames(
+                'navbar-item', { 'has-background-grey-lighter': isActive },
+              )}
+              to="/people"
+            >
+              People
+            </NavLink>
+          </div>
+        </div>
+      </nav>
+    </>
+  );
+}
+
+export default MainNavigation;

src/components/PeopleFilters/PeopleFilters.tsx

@@ -0,0 +1,111 @@
+/* eslint-disable max-len */
+import { SearchLink } from '../SearchLink';
+
+interface PeopleFiltersProps {
+  setSearchParams: (params: Record<string, any>) => void;
+  searchParams: URLSearchParams;
+}
+
+const centuriesList = ['16', '17', '18', '19', '20'];
+
+const PeopleFilters: React.FC<PeopleFiltersProps>
+= ({ setSearchParams, searchParams }) => {
+  const handleNameFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const query = event.target.value;
+
+    setSearchParams({ ...searchParams, query: query || null });
+  };
+
+  const handleCenturyClick = (century: string): string[] => {
+    const currentCenturies = searchParams.getAll('centuries').includes(century)
+      ? searchParams.getAll('centuries').filter(c => c !== century)
+      : [...searchParams.getAll('centuries'), century];
+
+    return currentCenturies;
+  };
+
+  const handleSexClick = (sex: string | null) => {
+    setSearchParams({ ...searchParams, sex: sex || undefined });
+  };
+
+  const getActiveClass = (key: string, value: string) => {
+    if (key === 'centuries') {
+      return searchParams.getAll(key).includes(value) ? 'is-info' : '';
+    }
+
+    return searchParams.get(key) === value ? 'is-active' : '';
+  };
+
+  return (
+    <nav className="panel">
+      <p className="panel-heading">Filters</p>
+
+      <p className="panel-tabs" data-cy="SexFilter">
+        {['All', 'Male', 'Female'].map(label => {
+          const sexValue = label === 'All' ? '' : label[0].toLowerCase();
+
+          return (
+            <SearchLink
+              key={label}
+              className={getActiveClass('sex', sexValue)}
+              params={{ sex: sexValue }}
+              onClick={() => handleSexClick(sexValue)}
+            >
+              {label}
+            </SearchLink>
+          );
+        })}
+      </p>
+
+      <div className="panel-block">
+        <p className="control has-icons-left">
+          <input
+            data-cy="NameFilter"
+            type="search"
+            className="input"
+            placeholder="Search"
+            onChange={handleNameFilterChange}
+            value={searchParams.get('query') || ''}
+          />
+          <span className="icon is-left">
+            <i className="fas fa-search" aria-hidden="true" />
+          </span>
+        </p>
+      </div>
+
+      <div className="panel-block">
+        <div className="level is-flex-grow-1 is-mobile" data-cy="CenturyFilter">
+          <div className="level-left">
+            {centuriesList.map(century => (
+              <SearchLink
+                key={century}
+                className={`button mr-1 ${getActiveClass('centuries', century)}`}
+                params={{ centuries: handleCenturyClick(century) }}
+                onClick={() => {
+                  const updatedCenturies = handleCenturyClick(century);
+
+                  setSearchParams({ ...searchParams, centuries: updatedCenturies });
+                }}
+              >
+                {century}
+              </SearchLink>
+            ))}
+          </div>
+          <div className="level-right ml-4">
+            <SearchLink className="button is-success is-outlined" params={{ centuries: [] }}>
+              All
+            </SearchLink>
+          </div>
+        </div>
+      </div>
+
+      <div className="panel-block">
+        <a className="button is-link is-outlined is-fullwidth" href="#/people">
+          Reset all filters
+        </a>
+      </div>
+    </nav>
+  );
+};
+
+export default PeopleFilters;