index.tsx

import { createElement, SFC } from 'react'
import { useOvermind } from '../../overmind'
import { Tab } from '../../overmind/types'
import * as styles from './styles'
import Tabs from '../Tabs'
import Actions from '../Actions'

import Console from '../Console'
import State from '../State'
import Components from '../Components'
import Flushes from '../Flushes'
import History from '../History'
import Charts from '../Charts'

const pages: { [key in Tab]: SFC } = {
  [Tab.Actions]: Actions,
  [Tab.Console]: Console,
  [Tab.State]: State,
  [Tab.Components]: Components,
  [Tab.Flushes]: Flushes,
  [Tab.Remove]: () => null,
  [Tab.History]: History,
  [Tab.Charts]: Charts,
}

const Workspace: SFC = () => {
  const { state } = useOvermind()
  const Page = pages[state.currentTab]

  return (
    <div className={styles.wrapper}>
      <div className={styles.content}>
        <Tabs />
        <div className={styles.pageContainer}>
          <Page />
        </div>
      </div>
    </div>
  )
}

export default Workspace