tabs.jsx

/* eslint-disable react/no-multi-comp */
import React, { PureComponent } from 'react'
// import PropTypes from 'prop-types'

import styled from 'styled-components'
import classnames from 'classnames'


class TabView extends PureComponent {
  handleChange = (event) => {
    const { onChange, value, onClick } = this.props

    if (onChange) {
      onChange(event, value)
    }

    if (onClick) {
      onClick(event)
    }
  }

  render() {
    const { children, value, onChange, className, ...props } = this.props
    return (
      <button onClick={this.handleChange} className={className} {...props}>
        {children}
      </button>
    )
  }
}

export const Tab = styled(TabView)`
  background-color: transparent;
  border: none;
  color: ${({ theme }) => theme.text.second};
  padding: 15px 25px;
  border-bottom: 2px solid transparent;
  font-size: 1em;
  transition: .3s;
  &.active {
    border-bottom-color: ${({ theme }) => theme.link.base};
    transition: .3s;
  }
  &:focus, &:hover {
    outline: none;
    border-bottom-color: ${({ theme }) => theme.link.base};
    transition: .3s;
  }
`


class Tabs extends PureComponent {
  state = {}

  handleChange = (event, value) => {
    this.props.onChange(event, value)
  }

  render() {
    const { className, value, onChange, children, ...props } = this.props
    return (
      <div className={className} {...props}>
        {React.Children.map(children, child => React.cloneElement(child, {
          className: classnames({
            active: value === child.props.value,
          }),
          onChange: this.handleChange,
          key: child.props.value,
        }))}
      </div>
    )
  }
}

export default styled(Tabs)`
  display: flex;
  align-items: flex-end;