Tabs ++ in Grommet

app.jsx

class App extends Component {
  state = {
    activeTab: 0,
  }

  setTab = (i) => {
    this.setState({activeTab: i})
  }

  render() {
    return (
      <Box>
        <Tabs
          activeTab={this.state.activeTab}
          changeTab={this.setTab}
          tabs={
            [ {active: true, label: 'Thing 1'},
              {active: false, label: 'Thing 2'}
            ]
          }
        />
      {/* Show Tab Content by Index Here  */}
      </Box>
    )
  }
}

tabs.jsx

import React from 'react';
import { Box, Button } from "grommet"


const commonBorder = {
  size: "medium",
  style: "solid",
  side: "bottom"
}

const borders = {
  true: {
    ...commonBorder,
    color: "accent-1",
  },
  false: {
    ...commonBorder,
    color: "light-2",
  }
}

const Tab = (props) => {
  return (
    <Box
      align={"center"}
      style={{flexBasis: 0, flexGrow: 1}}
      pad={'small'}
      border={borders[props.active]}>
      <Button
        focusIndicator={false}
        onClick={() => props.changeTab(props.index)}>
        {props.label}
      </Button>
    </Box>
  )
}

const Tabs = (props) => {
  return (
    <Box
      width={'large'} direction={'row'} justify={'center'}>
      {props.tabs.map((i, index) => {
        return (
          <Tab
            changeTab={props.changeTab}
            key={index}
            index={index}
            label={i.label}
            active={props.activeTab === index}
          />
        )
      })}
    </Box>
  )
}

export {
  Tab,
  Tabs
}