index.js

import { element } from 'deku'
import stateful from 'deku-stateful'
import './styles'

const log = debug('app:Tabs')

function initialState() {
	return {
		activeTab: 0
	}
}

function onCreate({ props, state, setState }) {
	const {items} = props

  log('onCreate', props, state)

	items.forEach((el, i) => {
		if (el.active === true) {
			setState({ activeTab: i })
		}
	})
}

function render({ props, state, setState }) {

  log('render',props,state)

	const { items } = props
	const { activeTab } = state

	function getHeadings() {
		return items.map(({ heading }, i) => (
			<div class={['tabs-heading', {'tabs-heading-active': activeTab === i}]}
           onClick={() => setState({ activeTab: i })}>
				<span>{heading}</span>
			</div>
		));
	}

	function getTabs() {
		return items.map(({content}, i) => (
			<div class={['tab', {'tab-active': activeTab === i}]}>
				{content}
			</div>
		));
	}

	return (
		<div class={['tabs', props.class]}>
			<div class='tabs-headings'>
				{getHeadings()}
			</div>
			<div class='tabs-content'>
				{getTabs()}
			</div>
		</div>
	);
}

export default stateful({ initialState, onCreate, render })