import React from 'react'; import {Row, Col, Image} from 'react-bootstrap'; import {BiCog, BiPowerOff} from 'react-icons/bi' import './ComponentCSS/MainHeader.css' export default function MainHeader(props) { const renderMenuItem = (activeOnView, label, onClick) => { const isActive = props.view === activeOnView; return (<Col className={isActive ? "menu-link-active" : ""}> <p className="pointer" onClick={() => onClick()}> {label} </p> </Col>) } return ( <Row id="header" className="main-header"> <Col sm={2} className="main-header-logo"> <Image src={require("./../../img/white-logo.svg")}/> </Col> <Col sm={6} className="d-flex"> {renderMenuItem('home', 'Home', props.goHome)} {renderMenuItem('market', 'Market', props.goToMarket)} {renderMenuItem('merchant', 'Merchant', props.goToMerchant)} {renderMenuItem('tokens', 'Tokens', props.goToTokens)} </Col> <Col sm={2} className=""> <BiCog tabIndex={4} size={40} className="m-3 pointer" onClick={props.goToSettings}/> <BiPowerOff tabIndex={5} size={40} className="m-3 pointer" onClick={props.logout}/> </Col> </Row> ) }