MyCrypto/common/components/Header/index.jsx

74 lines
2.4 KiB
JavaScript

import React, {Component} from 'react'
import NodeDropdownComponent from './components/NodeDropdownComponent'
import LanguageDropDownComponent from './components/LanguageDropdownComponent'
import PropTypes from 'prop-types';
export default class Header extends Component {
constructor(props) {
super(props)
}
static propTypes = {
// LanguageDropDownComponentProps
changeLanguage: PropTypes.func,
toggleLanguageDropdown: PropTypes.func,
languageSelection: PropTypes.number,
languageToggle: PropTypes.bool,
// NodeDropdownComponentProps
changeNode: PropTypes.func,
toggleNodeDropdown: PropTypes.func,
nodeSelection: PropTypes.number,
nodeToggle: PropTypes.bool
};
render() {
let {
languageSelection,
changeLanguage,
toggleLanguageDropdown,
languageToggle,
changeNode,
toggleNodeDropdown,
nodeSelection,
nodeToggle
} = this.props;
let LanguageDropDownComponentProps = {
languageSelection,
changeLanguage,
toggleLanguageDropdown,
languageToggle,
}
let NodeDropdownComponentProps = {
changeNode,
toggleNodeDropdown,
nodeSelection,
nodeToggle
}
return (
<section className="bg-gradient header-branding">
<section className="container">
<a className="brand" href="/" aria-label="Go to homepage">
{/* TODO - don't hardcode image path*/}
<img
src={"https://www.myetherwallet.com/images/logo-myetherwallet.svg"} height="64px"
width="245px"
alt="MyEtherWallet"/>
</a>
<div className="tagline">
<span style={{maxWidth: '395px'}}>
Open-Source &amp; Client-Side Ether Wallet · v3.6.0
</span>
&nbsp;&nbsp;&nbsp;
<LanguageDropDownComponent {...LanguageDropDownComponentProps}/>
&nbsp;&nbsp;&nbsp;
<NodeDropdownComponent {...NodeDropdownComponentProps}/>
</div>
</section>
</section>
)
}
}