mate-academy · ab3MN · Nov 16, 2024 · Nov 16, 2024
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,55 +1,16 @@
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
-
-// const tabs = [
-//   { id: 'tab-1', title: 'Tab 1', content: 'Some text 1' },
-//   { id: 'tab-2', title: 'Tab 2', content: 'Some text 2' },
-//   { id: 'tab-3', title: 'Tab 3', content: 'Some text 3' },
-// ];
+import { Nav } from './components/Nav/Nav';
+import { Outlet } from 'react-router-dom';
 
 export const App = () => (
   <>
     {/* Also requires <html class="has-navbar-fixed-top"> */}
-    <nav
-      className="navbar is-light is-fixed-top is-mobile has-shadow"
-      data-cy="Nav"
-    >
-      <div className="container">
-        <div className="navbar-brand">
-          <a href="/" className="navbar-item is-active">
-            Home
-          </a>
-          <a href="/tabs" className="navbar-item">
-            Tabs
-          </a>
-        </div>
-      </div>
-    </nav>
-
+    <Nav />
     <div className="section">
       <div className="container">
-        <h1 className="title">Home page</h1>
-        <h1 className="title">Tabs page</h1>
-        <h1 className="title">Page not found</h1>
-
-        <div className="tabs is-boxed">
-          <ul>
-            <li data-cy="Tab" className="is-active">
-              <a href="#/">Tab 1</a>
-            </li>
-            <li data-cy="Tab">
-              <a href="#/">Tab 2</a>
-            </li>
-            <li data-cy="Tab">
-              <a href="#/">Tab 3</a>
-            </li>
-          </ul>
-        </div>
-
-        <div className="block" data-cy="TabContent">
-          Please select a tab
-        </div>
+        <Outlet />
       </div>
     </div>
   </>

diff --git a/src/Roots.tsx b/src/Roots.tsx
@@ -0,0 +1,28 @@
+import { HashRouter, Navigate } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
+import { lazy, Suspense } from 'react';
+import { App } from './App';
+
+const HomePage = lazy(() => import('./pages/HomePage/HomePage'));
+const TabsPage = lazy(() => import('./pages/TabsPage/TabsPage'));
+const NotFoundPage = lazy(() => import('./pages/NotFoundPage/NotFoundPage'));
+
+export const Root = () => (
+  <HashRouter>
+    <Suspense>
+      <Routes>
+        <Route path="/" element={<App />}>
+          <Route index element={<HomePage />} />
+          <Route path="/home" element={<Navigate to="/" />} />
+
+          <Route path="tabs" element={<TabsPage />}>
+            <Route index element={<TabsPage />} />
+            <Route path=":tabId" element={<TabsPage />} />
+          </Route>
+
+          <Route path="*" element={<NotFoundPage />} />
+        </Route>
+      </Routes>
+    </Suspense>
+  </HashRouter>
+);
diff --git a/src/components/Nav/Nav.tsx b/src/components/Nav/Nav.tsx
@@ -0,0 +1,26 @@
+import { NavLink } from 'react-router-dom';
+import cn from 'classnames';
+import { navLinks } from '../../constants/navLinks';
+
+export const Nav = () => (
+  <nav
+    className="navbar is-light is-fixed-top is-mobile has-shadow"
+    data-cy="Nav"
+  >
+    <div className="container">
+      <div className="navbar-brand">
+        {navLinks.map(({ path, title, id }) => (
+          <NavLink
+            key={id}
+            to={path}
+            className={({ isActive }) =>
+              cn('navbar-item', { 'is-active': isActive })
+            }
+          >
+            {title}
+          </NavLink>
+        ))}
+      </div>
+    </div>
+  </nav>
+);
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -0,0 +1,38 @@
+import cn from 'classnames';
+import { tabs } from '../../constants/tabs';
+import { Link } from 'react-router-dom';
+import { FC } from 'react';
+
+interface TabsProps {
+  tabId: string | undefined;
+}
+
+export const Tabs: FC<TabsProps> = ({ tabId }) => {
+  const activeTab = tabs.find(({ id }) => id === tabId);
+
+  return (
+    <div data-cy="TabsComponent">
+      <div className="tabs is-boxed">
+        <ul>
+          {tabs.map(({ id, title }) => (
+            <li
+              className={cn({
+                'is-active': id === tabId,
+              })}
+              data-cy="Tab"
+              key={id}
+            >
+              <Link to={id} data-cy="TabLink">
+                {title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className="block" data-cy="TabContent">
+        {!activeTab ? 'Please select a tab' : activeTab.content}
+      </div>
+    </div>
+  );
+};
diff --git a/src/constants/navLinks.ts b/src/constants/navLinks.ts
@@ -0,0 +1,12 @@
+export const navLinks = [
+  {
+    id: '0',
+    path: '/',
+    title: 'Home',
+  },
+  {
+    id: '1',
+    path: '/tabs',
+    title: 'Tabs',
+  },
+];
diff --git a/src/constants/tabs.ts b/src/constants/tabs.ts
@@ -0,0 +1,5 @@
+export const tabs = [
+  { id: 'tab-1', title: 'Tab 1', content: 'Some text 1' },
+  { id: 'tab-2', title: 'Tab 2', content: 'Some text 2' },
+  { id: 'tab-3', title: 'Tab 3', content: 'Some text 3' },
+];
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,9 +1,4 @@
 import { createRoot } from 'react-dom/client';
-import { HashRouter } from 'react-router-dom';
-import { App } from './App';
+import { Root } from './Roots';
 
-createRoot(document.getElementById('root') as HTMLElement).render(
-  <HashRouter>
-    <App />
-  </HashRouter>,
-);
+createRoot(document.getElementById('root') as HTMLElement).render(<Root />);
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
@@ -0,0 +1,3 @@
+const HomePage = () => <h1 className="title">Home page</h1>;
+
+export default HomePage;
diff --git a/src/pages/NotFoundPage/NotFoundPage.tsx b/src/pages/NotFoundPage/NotFoundPage.tsx
@@ -0,0 +1,3 @@
+const NotFoundPage = () => <h1 className="title">Page not found</h1>;
+
+export default NotFoundPage;
diff --git a/src/pages/TabsPage/TabsPage.tsx b/src/pages/TabsPage/TabsPage.tsx
@@ -0,0 +1,15 @@
+import { useParams } from 'react-router-dom';
+import { Tabs } from '../../components/Tabs/Tabs';
+
+const TabsPage = () => {
+  const { tabId } = useParams();
+
+  return (
+    <>
+      <h1 className="title">Tabs page</h1>
+      <Tabs tabId={tabId} />
+    </>
+  );
+};
+
+export default TabsPage;