index.tsx

import * as React from 'react'
import { Wrapper, Button } from './elements'
import { connect, Connect } from '../../app'
import Icon from '../common/Icon'
import { Tab } from '../../app/types'
import Tooltip from '../common/Tooltip'

const Tabs: React.SFC<Connect> = ({ app }) => (
  <Wrapper>
    <Tooltip text="State">
      <Button
        active={app.state.currentTab === Tab.State}
        onClick={() => app.actions.changeTab(Tab.State)}
      >
        <Icon>database</Icon>
      </Button>
    </Tooltip>
    <Tooltip text="Actions">
      <Button
        active={app.state.currentTab === Tab.Actions}
        onClick={() => app.actions.changeTab(Tab.Actions)}
      >
        <Icon>cogs</Icon>
      </Button>
    </Tooltip>
    <Tooltip text="Components">
      <Button
        active={app.state.currentTab === Tab.Components}
        onClick={() => app.actions.changeTab(Tab.Components)}
      >
        <Icon>code</Icon>
      </Button>
    </Tooltip>
    <Tooltip text="Flushes">
      <Button
        active={app.state.currentTab === Tab.Flushes}
        onClick={() => app.actions.changeTab(Tab.Flushes)}
      >
        <Icon>save</Icon>
      </Button>
    </Tooltip>
    <Tooltip text="Console">
      <Button
        active={app.state.currentTab === Tab.Console}
        onClick={() => app.actions.changeTab(Tab.Console)}
      >
        <Icon>terminal</Icon>
      </Button>
    </Tooltip>
    <Tooltip text="Remove">
      <Button active={false} onClick={() => app.actions.removeApp()}>
        <Icon>trash</Icon>
      </Button>
    </Tooltip>
  </Wrapper>
)

export default connect(Tabs)