From fe377d4e9d859cb5d23c2a0e3c7804fb38d29f2e Mon Sep 17 00:00:00 2001 From: YuriiMykhailenko Date: Thu, 24 Oct 2024 09:36:08 +0300 Subject: [PATCH] add solution --- src/App.tsx | 103 ++++++++++++++++++++++++--------------------- src/pages/Tabs.tsx | 39 +++++++++++++++++ 2 files changed, 95 insertions(+), 47 deletions(-) create mode 100644 src/pages/Tabs.tsx diff --git a/src/App.tsx b/src/App.tsx index f587aebf0..af10432d3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,56 +1,65 @@ import 'bulma/css/bulma.css'; import '@fortawesome/fontawesome-free/css/all.css'; import './App.scss'; +import { Routes, Route, NavLink, Navigate } from 'react-router-dom'; +import { Tabs } from './pages/Tabs'; +import cn 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' }, -// ]; +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 App = () => ( - <> - {/* Also requires */} - - -
-
-

Home page

-

Tabs page

-

Page not found

- -
- +export const App = () => { + return ( + <> + -
- Please select a tab +
+
+ + + } + /> + Home page} /> + + } /> + + + Page not found} + /> +
-
- -); + + ); +}; diff --git a/src/pages/Tabs.tsx b/src/pages/Tabs.tsx new file mode 100644 index 000000000..79a0fd834 --- /dev/null +++ b/src/pages/Tabs.tsx @@ -0,0 +1,39 @@ +import { Link, useParams } from 'react-router-dom'; +import { Tab } from '../types/Tab'; +import { FC } from 'react'; +import cn from 'classnames'; + +interface Props { + tabs: Tab[]; +} + +export const Tabs: FC = ({ tabs }) => { + const { tabId } = useParams(); + const activeTab = tabs.find(tab => tab.id === tabId); + + return ( + <> +

Tabs page

+ +
+
    + {tabs.map(tab => { + return ( +
  • + {tab.title} +
    • + ); + })} +
+
+ +
+ {activeTab?.content || 'Please select a tab'} +
+ + ); +};