From 51113c975bf3fa2c79dbfdfed040eb3b79a1d21b Mon Sep 17 00:00:00 2001 From: Svidruk Date: Wed, 23 Oct 2024 20:50:38 +0300 Subject: [PATCH] solution --- src/App.tsx | 75 ++++++++++++++------------------------ src/Data/tabs.tsx | 7 ++++ src/Root.tsx | 25 +++++++++++++ src/index.tsx | 10 ++--- src/pages/Home.tsx | 3 ++ src/pages/PageNotFound.tsx | 3 ++ src/pages/Tabs.tsx | 34 +++++++++++++++++ src/pages/index.tsx | 3 ++ 8 files changed, 106 insertions(+), 54 deletions(-) create mode 100644 src/Data/tabs.tsx create mode 100644 src/Root.tsx create mode 100644 src/pages/Home.tsx create mode 100644 src/pages/PageNotFound.tsx create mode 100644 src/pages/Tabs.tsx create mode 100644 src/pages/index.tsx diff --git a/src/App.tsx b/src/App.tsx index f587aebf0..be5eb9988 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,56 +1,37 @@ import 'bulma/css/bulma.css'; import '@fortawesome/fontawesome-free/css/all.css'; import './App.scss'; +import React from 'react'; +import { NavLink, Outlet } 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' }, -// ]; +const getLinkClass = ({ isActive }: { isActive: boolean }) => + classNames(`navbar-item`, { 'is-active': isActive }); -export const App = () => ( - <> - {/* Also requires */} - +export const App = () => { + return ( + + +
+
+
- - -); + + ); +}; diff --git a/src/Data/tabs.tsx b/src/Data/tabs.tsx new file mode 100644 index 000000000..e2fe73c2c --- /dev/null +++ b/src/Data/tabs.tsx @@ -0,0 +1,7 @@ +import { Tab } from "../types/Tab"; + +export const tabs: Tab[] = [ + { 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/Root.tsx b/src/Root.tsx new file mode 100644 index 000000000..cd2f59fec --- /dev/null +++ b/src/Root.tsx @@ -0,0 +1,25 @@ +import { + HashRouter as Router, + Routes, + Route, + Navigate, +} from 'react-router-dom'; +import { Home, PageNotFound, Tabs } from './pages'; +import { App } from './App'; +import React from 'react'; + +export const Root = () => ( + + + }> + } /> + } /> + + } /> + } /> + + } /> + + + +); diff --git a/src/index.tsx b/src/index.tsx index 53697a9fb..3d543f55a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,9 +1,5 @@ import { createRoot } from 'react-dom/client'; -import { HashRouter } from 'react-router-dom'; -import { App } from './App'; +import { Root } from './Root'; +import React from 'react'; -createRoot(document.getElementById('root') as HTMLElement).render( - - - , -); +createRoot(document.getElementById('root') as HTMLElement).render(); diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 000000000..364a3df9b --- /dev/null +++ b/src/pages/Home.tsx @@ -0,0 +1,3 @@ +import React from 'react'; + +export const Home = () =>

Home page

; diff --git a/src/pages/PageNotFound.tsx b/src/pages/PageNotFound.tsx new file mode 100644 index 000000000..aace99aa6 --- /dev/null +++ b/src/pages/PageNotFound.tsx @@ -0,0 +1,3 @@ +import React from 'react'; + +export const PageNotFound = () =>

Page not found

; diff --git a/src/pages/Tabs.tsx b/src/pages/Tabs.tsx new file mode 100644 index 000000000..161e0f16a --- /dev/null +++ b/src/pages/Tabs.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { tabs } from '../Data/tabs'; +import { Link, useParams } from 'react-router-dom'; +import classNames from 'classnames'; + +export const Tabs = () => { + const { selectedTabId } = useParams(); + const selectedTab = tabs.find(tab => tab.id === selectedTabId); + + return ( + <> +
+

Tabs page

+
+
+
    + {tabs.map(tab => ( +
  • + {tab.title} +
    • + ))} +
+
+ +
+ {selectedTab ? selectedTab.content : 'Please select a tab'} +
+ + ); +}; diff --git a/src/pages/index.tsx b/src/pages/index.tsx new file mode 100644 index 000000000..85aa624fb --- /dev/null +++ b/src/pages/index.tsx @@ -0,0 +1,3 @@ +export { Home } from './Home'; +export { Tabs } from './Tabs'; +export { PageNotFound } from './PageNotFound';