index.tsx

import { createElement, FunctionComponent, Fragment, useState } from 'react'
import { useOvermind } from '../../overmind'
import * as styles from './styles'
import { colors } from '../../theme'

const RuntimeConfig: FunctionComponent = () => {
  const { state, actions } = useOvermind()

  return (
    <div className={styles.wrapper}>
      <div
        className={styles.overlay}
        onClick={() => actions.toggleRuntimeConfig()}
      />
      <div className={styles.contentWrapper}>
        <strong>{state.currentApp.connectionState}</strong>
        <span style={{ margin: '0 5px' }}>on port</span>
        <strong>{state.port}</strong>
      </div>
    </div>
  )
}

export default RuntimeConfig