-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
fe88a65
commit fe377d4
Showing
2 changed files
with
95 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 <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"> | ||
| Home | ||
| </a> | ||
| <a href="/tabs" className="navbar-item"> | ||
| Tabs | ||
| </a> | ||
| </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> | ||
| export const App = () => { | ||
| return ( | ||
| <> | ||
| <nav | ||
| className="navbar is-light is-fixed-top is-mobile has-shadow" | ||
| data-cy="Nav" | ||
| > | ||
| <div className="container"> | ||
| <div className="navbar-brand"> | ||
| <NavLink | ||
| to="/" | ||
| className={({ isActive }) => { | ||
| return cn('navbar-item', { 'is-active': isActive }); | ||
| }} | ||
| > | ||
| Home | ||
| </NavLink> | ||
| <NavLink | ||
| to="/tabs" | ||
| className={({ isActive }) => { | ||
| return cn('navbar-item', { 'is-active': isActive }); | ||
| }} | ||
| > | ||
| Tabs | ||
| </NavLink> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <div className="block" data-cy="TabContent"> | ||
| Please select a tab | ||
| <div className="section"> | ||
| <div className="container"> | ||
| <Routes> | ||
| <Route path="/"> | ||
| <Route | ||
| path="/home" | ||
| element={<Navigate to="/" replace={true} />} | ||
| /> | ||
| <Route index element={<h1 className="title">Home page</h1>} /> | ||
| <Route path="tabs"> | ||
| <Route path=":tabId?" element={<Tabs tabs={tabs} />} /> | ||
| </Route> | ||
| </Route> | ||
| <Route | ||
| path="*" | ||
| element={<h1 className="title">Page not found</h1>} | ||
| /> | ||
| </Routes> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<Props> = ({ tabs }) => { | ||
| const { tabId } = useParams(); | ||
| const activeTab = tabs.find(tab => tab.id === tabId); | ||
|
|
||
| return ( | ||
| <> | ||
| <h1 className="title">Tabs page</h1> | ||
|
|
||
| <div className="tabs is-boxed"> | ||
| <ul> | ||
| {tabs.map(tab => { | ||
| return ( | ||
| <li | ||
| data-cy="Tab" | ||
| className={cn({ 'is-active': activeTab?.id === tab.id })} | ||
| key={tab.id} | ||
| > | ||
| <Link to={`../${tab.id}`}>{tab.title}</Link> | ||
| </li> | ||
| ); | ||
| })} | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div className="block" data-cy="TabContent"> | ||
| {activeTab?.content || 'Please select a tab'} | ||
| </div> | ||
| </> | ||
| ); | ||
| }; |