djmil/corda-checkers
djmil/corda-checkers
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

move Header into App

Browse Source
This commit is contained in:
djmil 2023-11-08 19:30:06 +01:00
parent aa2a250085
commit 7314b8c328
4 changed files with 82 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
webapp/src/App.css
View File

@ -1,3 +1,46 @@
.Header .OnlineToggle {
transform: scale(.5);
margin-left: -19px;
}
.Header {
display: flex;
}
.Header nav {
align-items: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
padding-top: 10px;
}
.Header a {
color: black;
text-decoration: none;
transition: .25s ease;
width: fit-content;
margin-left: 5px;
margin-right: 5px;
padding: 0.25rem 1rem;
}
.Header .active {
color: white;
border-radius: 2px;
background-color: cadetblue;
opacity: 80%;
padding: 0.25rem 1rem;
}
.Header a:hover:not(.active) {
color: cadetblue;
box-shadow: 0 1.5px 0 0 currentcolor;
}
[data-darkreader-scheme="dark"] .Header a { [data-darkreader-scheme="dark"] .Header a {
color: darkslategrey; color: darkslategrey;
} }

47
webapp/src/App.js
View File

@ -1,8 +1,10 @@
import './App.css'; import './App.css';
import React from 'react'; import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom'; import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom';
import OnlineToggle from './components/OnlineToggle';
import Wobler from './components/Wobler';
import Header from './container/Header';
import About from "./components/About" import About from "./components/About"
import Games from './container/Games'; import Games from './container/Games';
import Leaderboard from './container/Leaderboard'; import Leaderboard from './container/Leaderboard';
@ -16,19 +18,19 @@ import useUserApi from './api/user';
import useLeaderboardApi from './api/leaderboard'; import useLeaderboardApi from './api/leaderboard';
import useGamesApi from './api/games'; import useGamesApi from './api/games';
function App() { export default function App() {
const userReducer = useUserReducer(); const userReducer = useUserReducer();
const pollingReducer = usePollingReducer(); const pollingFlux = usePollingReducer();
const leaderboardReducer = useLeaderboardReducer(); const leaderboardReducer = useLeaderboardReducer();
const gamesReducer = useGamesReducer(); const gamesReducer = useGamesReducer();
const user = useUserApi(userReducer).get(); const user = useUserApi(userReducer).get();
const leaderboard = useLeaderboardApi(leaderboardReducer).poll(pollingReducer); const leaderboard = useLeaderboardApi(leaderboardReducer).poll(pollingFlux);
/*const gamesApi = */ useGamesApi(gamesReducer).list(pollingReducer); /*const gamesApi = */ useGamesApi(gamesReducer).list(pollingFlux);
return ( return (
<BrowserRouter> <BrowserRouter>
<Header pollingReducer={pollingReducer} /> <Header pollingFlux={pollingFlux} />
<Routes> <Routes>
<Route path="/" element={<About />} /> <Route path="/" element={<About />} />
<Route path="/about" element={<About />} /> <Route path="/about" element={<About />} />
@ -39,4 +41,33 @@ function App() {
) )
} }
export default App; function Header({ pollingFlux }) {
const [polling, dispatchPolling] = pollingFlux;
return (
<div className='Header'>
<h1>
CordaCheckers
</h1>
<OnlineToggle
isOnline={polling.enabled}
onClick={() => dispatchPolling({ type: "toggleOnOff" })}
/>
<nav>
<NavLink to="/about">
About
</NavLink>
<NavLink to="/games">
<Wobler text="Games" dance={polling.games} />
</NavLink>
<NavLink to="/leaderboard">
<Wobler text="Leaderboard" dance={polling.leaderboard} />
</NavLink>
</nav>
</div>
)
}

42
webapp/src/container/Header.css
View File

@ -1,42 +0,0 @@
.OnlineToggle {
transform: scale(.5);
margin-left: -19px;
}
.Header {
display: flex;
}
.Header nav {
align-items: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
padding-top: 10px;
}
.Header a {
color: black;
text-decoration: none;
transition: .25s ease;
width: fit-content;
margin-left: 5px;
margin-right: 5px;
padding: 0.25rem 1rem;
}
.Header .active {
color: white;
border-radius: 2px;
background-color: cadetblue;
opacity: 80%;
padding: 0.25rem 1rem;
}
.Header a:hover:not(.active) {
color: cadetblue;
box-shadow: 0 1.5px 0 0 currentcolor;
}

36
webapp/src/container/Header.jsx
View File

@ -1,36 +0,0 @@
import './Header.css';
import React from "react"
import { NavLink } from "react-router-dom";
import OnlineToggle from '../components/OnlineToggle';
import Wobler from '../components/Wobler';
export default function Header({ pollingReducer }) {
const [polling, dispatchPolling] = pollingReducer;
return (
<div className='Header'>
<h1 >
CordaCheckers
</h1>
<OnlineToggle
isOnline={polling.enabled}
onClick={() => dispatchPolling({ type: "toggleOnOff" })}
/>
<nav>
<NavLink to="/about">
About
</NavLink>
<NavLink to="/games">
<Wobler text="Games" dance={polling.games} />
</NavLink>
<NavLink to="/leaderboard">
<Wobler text="Leaderboard" dance={polling.leaderboard} />
</NavLink>
</nav>
</div>
)
}