content: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { observer } from 'mobx-react';
  import classnames from 'classnames';
  
  import { oneOrManyChildElements } from '../../../prop-types';
  
  export default @observer class Tab extends Component {
    static propTypes = {
      children: oneOrManyChildElements.isRequired,
      active: PropTypes.number,
    };
  
    static defaultProps = {
      active: 0,
    };
  
    componentWillMount() {
      this.setState({ active: this.props.active });
    }
  
    switchTab(index) {
      this.setState({ active: index });
    }
  
    render() {
      const { children: childElements } = this.props;
      const children = childElements.filter(c => !!c);
  
      if (children.length === 1) {
        return <div>{children}</div>;
      }
  
      return (
        <div className="content-tabs">
          <div className="content-tabs__tabs">
            {React.Children.map(children, (child, i) => (
              <button
                key={i}
                className={classnames({
                  'content-tabs__item': true,
                  'is-active': this.state.active === i,
                })}
                onClick={() => this.switchTab(i)}
                type="button"
              >
                {child.props.title}
              </button>
            ))}
          </div>
          <div className="content-tabs__content">
            {React.Children.map(children, (child, i) => (
              <div
                key={i}
                className={classnames({
                  'content-tabs__item': true,
                  'is-active': this.state.active === i,
                })}
                type="button"
              >
                {child}
              </div>
            ))}
          </div>
        </div>
      );
    }
  }
  