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

import PropTypes from 'prop-types'
import React, { Component } from 'react'

import Button from '../button/Button'
import BreadcrumbTrail from '../breadcrumb/BreadcrumbTrail'
import { renderComponent } from '../../utils/componentUtils'

const DefaultToolbar = props => (
	<Button type="submit" text="Save" style="secondary" size="large" onClick={props.onSave} />
)

export default class Bulkhead extends Component {
	static propTypes = {
		title: PropTypes.node,
		Toolbar: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
	}

	static defaultProps = {
		title: 'Untitled',
		Toolbar: DefaultToolbar,
	}

	render() {
		const { title, Toolbar, ...props } = this.props
		return (
			<div className="bulkhead flex">
				<div className="bulkhead-left">
					<h1 className="bulkhead-title">{title}</h1>
					<BreadcrumbTrail />
				</div>
				<div className="bulkhead-right">{renderComponent(Toolbar, props)}</div>
			</div>
		)
	}
}