@bigfishtv/cockpit/src/components/page/Header.js

import React, { Component } from 'react'

export default class Header extends Component {
	static defaultProps = {
		onChange: () => console.warn('No onChange prop provided for Header'),
	}

	handleOnChange = event => {
		this.props.onChange(event.target.value)
	}

	render() {
		return (
			<header className="header">
				<form className="header-search" action="">
					<input
						className="input input-large"
						type="search"
						placeholder="Global Search [WIP]"
						onChange={this.handleOnChange}
					/>
				</form>
				{/*
					<nav className="header-navigation">
						<a href="/tank/users/me">
							<Icon name="profile" />
						</a>
						<a href="/tank/redirects">
							<Icon name="redirects" />
						</a>
						<a href="/tank/settings">
							<Icon name="settings" />
						</a>
						<a href="/tank/users/logout">
							<Icon name="logout" />
						</a>
					</nav>
				*/}
			</header>
		)
	}
}