From f735e113260e22402bac452d86c11abeb78ffc75 Mon Sep 17 00:00:00 2001 From: Ivan Mondok Date: Mon, 2 Dec 2024 13:58:33 +0200 Subject: [PATCH] solution --- README.md | 2 +- src/App.tsx | 79 +++++++++++++++++++++--------------------------- src/HomePage.tsx | 5 +++ src/Root.tsx | 20 ++++++++++++ src/TabsPage.tsx | 48 +++++++++++++++++++++++++++++ src/index.tsx | 10 ++---- 6 files changed, 111 insertions(+), 53 deletions(-) create mode 100644 src/HomePage.tsx create mode 100644 src/Root.tsx create mode 100644 src/TabsPage.tsx diff --git a/README.md b/README.md index 5e3bf0ea2..082bf505c 100644 --- a/README.md +++ b/README.md @@ -32,5 +32,5 @@ or [React Tabs](https://github.com/mate-academy/react_tabs#react-tabs). - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline). - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript). - Open one more terminal and run tests with `npm test` to ensure your solution is correct. -- Replace `` with your Github username in the [DEMO LINK](https://.github.io/react_tabs-with-router/) and add it to the PR description. +- Replace `` with your Github username in the [DEMO LINK](https://imondok03.github.io/react_tabs-with-router/) and add it to the PR description. diff --git a/src/App.tsx b/src/App.tsx index f587aebf0..2a2557b1f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,56 +1,45 @@ import 'bulma/css/bulma.css'; import '@fortawesome/fontawesome-free/css/all.css'; import './App.scss'; +import { Outlet, NavLink, useLocation, Navigate } from 'react-router-dom'; +import classNames from 'classnames'; +import React from 'react'; -// 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 = () => { + const getLinkClass = ({ isActive }: { isActive: boolean }) => { + return classNames('navbar-item', { 'is-active': isActive }); + }; -export const App = () => ( - <> - {/* Also requires */} - + const { pathname } = useLocation(); -
-
-

Home page

-

Tabs page

-

Page not found

+ if (pathname === '/home') { + return ; + } -
- + return ( + <> + {/* Also requires */} + -
- Please select a tab +
+
+
-
- -); + + ); +}; diff --git a/src/HomePage.tsx b/src/HomePage.tsx new file mode 100644 index 000000000..8e5d66e46 --- /dev/null +++ b/src/HomePage.tsx @@ -0,0 +1,5 @@ +import React from 'react'; + +export const HomePage = () => { + return

Home page

; +}; diff --git a/src/Root.tsx b/src/Root.tsx new file mode 100644 index 000000000..47f5aa178 --- /dev/null +++ b/src/Root.tsx @@ -0,0 +1,20 @@ +import { HashRouter, Route, Routes } from 'react-router-dom'; +import { App } from './App'; +import React from 'react'; +import { TabsPage } from './TabsPage'; +import { HomePage } from './HomePage'; + +export const Root = () => ( + + + }> + } /> + + } /> + } /> + + Page not found} /> + + + +); diff --git a/src/TabsPage.tsx b/src/TabsPage.tsx new file mode 100644 index 000000000..e54cb226c --- /dev/null +++ b/src/TabsPage.tsx @@ -0,0 +1,48 @@ +import classNames from 'classnames'; +import React from 'react'; +import { useMemo } from 'react'; +import { Link, Outlet, useParams } from 'react-router-dom'; + +export const TabsPage = () => { + const { tabId } = useParams(); + + const tabs = useMemo(() => { + return [ + { 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 selectedTab = tabs.find(tab => tab.id === tabId); + + return ( + <> +

Tabs page

+
+
    + {tabs.map(item => { + const { id, title } = item; + + return ( +
  • + {title} +
    • + ); + })} +
+
+ +
+ {selectedTab ? selectedTab.content : 'Please select a tab'} +
+ + + ); +}; 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();