mnml/client/src/components/header.jsx
2019-06-03 23:24:48 +10:00

41 lines
935 B
JavaScript

// eslint-disable-next-line
const preact = require('preact');
const { connect } = require('preact-redux');
const { saw } = require('./shapes');
const actions = require('./../actions');
function pingColour(ping) {
if (ping < 100) return 'forestgreen';
if (ping < 200) return 'yellow';
return 'red';
}
const addState = connect(
({ account, ping, showNav }) => {
return { account, ping };
},
);
function renderHeader(args) {
const { account, ping } = args;
const accountStatus = account
? (<div className="header-status">
<h1 className="header-username">{account.name}</h1>
{saw(pingColour(ping))}
<div className="ping-text">{ping}ms</div>
</div>)
: '';
return (
<header>
<h1 className="header-title">mnml.gg</h1>
{accountStatus}
</header>
);
}
module.exports = addState(renderHeader);