hyper/app/tabs.js

import React from 'react';
import classes from 'classnames';

export default class Tabs extends React.Component {

  render () {
    const {
      data = [],
      borderColor,
      active,
      activeMarkers = [],
      onChange,
      onClose
    } = this.props;

    return <nav style={{ WebkitAppRegion: 'drag' }}>{
      data.length
        ? 1 === data.length
          ? <div className='single'>{ data[0] }</div>
          : <ul style={{ borderColor }} className='tabs'>
              {
                data.map((tab, i) => {
                  const isActive = i === active;
                  const hasActivity = ~activeMarkers.indexOf(i);
                  return <li
                    key={`tab-${i}`}
                    className={classes({ is_active: isActive, has_activity: hasActivity })}>
                      <span
                        style={{ borderColor: isActive ? borderColor : null }}
                        onClick={ onChange ? onClick.bind(null, i, onChange, active) : null }>
                        { tab }
                      </span>
                      <i onClick={ onClose ? onClose.bind(null, i) : null }>
                        <svg className='icon'>
                          <use xlinkHref='assets/icons.svg#close'></use>
                        </svg>
                      </i>
                  </li>;
                })
              }
            </ul>
        : null
    }</nav>;
  }

}

function onClick (i, onChange, active) {
  if (i !== active) {
    onChange(i);
  }
}