const { Component } = require('react') const h = require('react-hyperscript') const classnames = require('classnames') class TabBar extends Component { constructor (props) { super(props) const { defaultTab, tabs } = props this.state = { subview: defaultTab || tabs[0].key, } } render () { const { tabs = [], tabSelected } = this.props const { subview } = this.state return ( h('.tab-bar', {}, [ tabs.map((tab) => { const { key, content } = tab return h('div', { className: classnames('tab-bar__tab pointer', { 'tab-bar__tab--active': subview === key, }), onClick: () => { this.setState({ subview: key }) tabSelected(key) }, key, }, content) }), h('div.tab-bar__tab.tab-bar__grow-tab'), ]) ) } } module.exports = TabBar