add task solution

mate-academy · Nov 18, 2024 · 400ad2a · 400ad2a
1 parent fe88a65
commit 400ad2a
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 42 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,56 +1,40 @@
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
+import { Outlet, NavLink } from 'react-router-dom';
+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' },
-// ];
+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' },
+];
+
+const getLinkClass = ({ isActive }: { isActive: boolean }) =>
+  classNames('navbar-item', {
+    'is-active': isActive,
+  });
 
 export const App = () => (
-  <>
-    {/* Also requires <html class="has-navbar-fixed-top"> */}
+  <html className="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={getLinkClass}>
             Home
-          </a>
-          <a href="/tabs" className="navbar-item">
+          </NavLink>
+          <NavLink to="/tabs" className={getLinkClass}>
             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>
+      <Outlet />
     </div>
-  </>
+  </html>
 );
diff --git a/src/Root.tsx b/src/Root.tsx
@@ -0,0 +1,26 @@
+import { HashRouter, Navigate } from 'react-router-dom';
+import { App } from './App';
+import { Route, Routes } from 'react-router-dom';
+import { HomePage } from './pages/HomePage';
+import { TabsPage } from './pages/TabsPage';
+
+export const Root = () => {
+  return (
+  <HashRouter>
+    <Routes>
+      <Route path="/" element={<App />}>
+
+        <Route index element={<HomePage />} />
+        <Route path="home" element={<Navigate to="/" />} />
+
+        <Route path="tabs">
+          <Route index element={<TabsPage />} />
+          <Route path=":tabId?" element={<TabsPage />} />
+        </Route>
+
+        <Route path="*" element={<h1 className="title">Page not found</h1>} />
+      </Route>
+    </Routes>
+  </HashRouter>
+  );
+};
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,9 +1,6 @@
 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>,
-);
+const container = document.getElementById('root') as HTMLElement;
+
+createRoot(container).render(<Root />);
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -0,0 +1,5 @@
+export const HomePage = () => (
+  <div className="container">
+    <h1 className="title">Home page</h1>
+  </div>
+);
diff --git a/src/pages/TabsPage.tsx b/src/pages/TabsPage.tsx
@@ -0,0 +1,36 @@
+import { useParams, Link } from 'react-router-dom';
+import { tabs } from '../App';
+
+export const TabsPage = () => {
+  const { tabId } = useParams();
+  const selectedTab = tabs.find(tab => tab.id === tabId);
+
+  return (
+    <div className="container">
+      <h1 className="title">Tabs page</h1>
+      <div className="tabs is-boxed">
+        <ul>
+        {tabs.map(tab => (
+            <li
+              data-cy="Tab"
+              className={tabId === tab.id ? 'is-active' : ''}
+              key={tab.id}
+            >
+              <Link to={`/tabs/${tab.id}`}>{tab.title}</Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {selectedTab ? (
+        <div className="block" data-cy="TabContent">
+          {selectedTab.content}
+        </div>
+      ) : (
+        <div className="block" data-cy="TabContent">
+          Please select a tab
+        </div>
+      )}
+     </div>
+  );
+};