index.tsx

import { Fragment, createElement, FunctionComponent } from 'react'
import { useOvermind } from '../../overmind'
import { getAppShortName, nameToColor } from '../../overmind/utils'
import * as styles from './styles'
import { css } from 'emotion'

const Apps: FunctionComponent = () => {
  const { state, actions } = useOvermind()
  return (
    <div className={styles.wrapper}>
      <div
        className={styles.currentApp(nameToColor(state.currentAppName))}
        onClick={actions.toggleShowApps}
      >
        {getAppShortName(state.currentAppName)}
      </div>
      {state.showApps ? (
        <Fragment>
          <div className={styles.overlay} onClick={actions.toggleShowApps} />
          <div className={styles.appsList}>
            {Object.keys(state.apps).map((appName) => (
              <div
                className={css(
                  styles.app,
                  state.currentAppName === appName && styles.appSelected
                )}
                key={appName}
                onClick={() => actions.selectApp(appName)}
              >
                {appName}
              </div>
            ))}
          </div>
        </Fragment>
      ) : null}
    </div>
  )
}

export default Apps