mate-academy · syavaYki · Oct 9, 2024
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,56 +1,39 @@
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
+import classNames from 'classnames';
 
-// 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 { NavLink, 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">
+          <NavLink
+            to="/"
+            className={({ isActive }) =>
+              classNames('navbar-item', { 'is-active': isActive })
+            }
+          >
             Home
-          </a>
-          <a href="/tabs" className="navbar-item">
+          </NavLink>
+
+          <NavLink
+            to="tabs"
+            className={({ isActive }) =>
+              classNames('navbar-item', { 'is-active': isActive })
+            }
+          >
             Tabs
-          </a>
+          </NavLink>
         </div>
       </div>
     </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>
-      </div>
-    </div>
+    <Outlet />
   </>
 );
diff --git a/src/Components/Error/Error.tsx b/src/Components/Error/Error.tsx
@@ -0,0 +1,3 @@
+export const Error: React.FC = () => {
+  return <h1 className="title">Page not found</h1>;
+};
diff --git a/src/Components/Error/index.ts b/src/Components/Error/index.ts
@@ -0,0 +1 @@
+export * from './Error';
diff --git a/src/Components/HomePage/HomePage.tsx b/src/Components/HomePage/HomePage.tsx
@@ -0,0 +1,9 @@
+export const HomePage: React.FC = () => {
+  return (
+    <div className="section">
+      <div className="container">
+        <h1 className="title">Home page</h1>
+      </div>
+    </div>
+  );
+};
diff --git a/src/Components/HomePage/index.ts b/src/Components/HomePage/index.ts
@@ -0,0 +1 @@
+export * from './HomePage';
diff --git a/src/Components/TabItem/TabItem.tsx b/src/Components/TabItem/TabItem.tsx
@@ -0,0 +1,13 @@
+import { Tab } from '../../types/Tab';
+import { Link } from 'react-router-dom';
+
+type Props = Tab;
+export const TabItem: React.FC<Props> = ({ id, title, isSelected }) => {
+  return (
+    <li data-cy="Tab" className={isSelected ? 'is-active' : ''}>
+      <Link to={`/tabs/${id}`} replace={true}>
+        {title}
+      </Link>
+    </li>
+  );
+};
diff --git a/src/Components/TabItem/index.ts b/src/Components/TabItem/index.ts
@@ -0,0 +1 @@
+export * from './TabItem';
diff --git a/src/Components/Tabs/Tabs.tsx b/src/Components/Tabs/Tabs.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { TabItem } from '../TabItem';
+
+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' },
+];
+
+export const Tabs: React.FC = () => {
+  const { tabId } = useParams();
+  const seletedTab = tabs.find(tab => tab.id === tabId);
+
+  return (
+    <div className="section">
+      <div className="container">
+        <h1 className="title">Tabs page</h1>
+
+        <div className="tabs is-boxed">
+          <ul>
+            {tabs.map(tab => {
+              return (
+                <TabItem
+                  key={tab.id}
+                  id={tab.id}
+                  title={tab.title}
+                  isSelected={seletedTab?.id === tab.id}
+                />
+              );
+            })}
+          </ul>
+        </div>
+
+        <div className="block" data-cy="TabContent">
+          {seletedTab ? seletedTab.content : 'Please select a tab'}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/Components/Tabs/index.ts b/src/Components/Tabs/index.ts
@@ -0,0 +1 @@
+export * from './Tabs';
diff --git a/src/Root.tsx b/src/Root.tsx
@@ -0,0 +1,30 @@
+import {
+  HashRouter as Router,
+  Navigate,
+  Route,
+  Routes,
+} from 'react-router-dom';
+import { App } from './App';
+import { HomePage } from './Components/HomePage';
+import { Tabs } from './Components/Tabs';
+import { Error } from './Components/Error';
+
+export const Root = () => {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<App />}>
+          <Route index element={<HomePage />} />
+          <Route path="/home" element={<Navigate to="/" />} />
+
+          <Route path="tabs">
+            <Route index element={<Tabs />} />
+
+            <Route path=":tabId" element={<Tabs />} />
+          </Route>
+          <Route path="*" element={<Error />} />
+        </Route>
+      </Routes>
+    </Router>
+  );
+};
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 './Root';
 
-createRoot(document.getElementById('root') as HTMLElement).render(
-  <HashRouter>
-    <App />
-  </HashRouter>,
-);
+createRoot(document.getElementById('root') as HTMLElement).render(<Root />);
diff --git a/src/types/Tab.ts b/src/types/Tab.ts
@@ -1,5 +1,5 @@
 export interface Tab {
   id: string;
   title: string;
-  content: string;
+  isSelected: boolean;
 }