import React from 'react' ; import styled , { useTheme } from 'styled-components' ; import { Text , TopNav , Flex } from 'design' ; import { Clipboard } from 'design/Icon' ; import { colors } from 'teleport/Console/colors' ; import ActionMenu from './ActionMenu' ; export default function TopBar ( props ) { const { userHost , clipboard , recording , onDisconnect } = props ; const theme = useTheme ( ) ; const primaryOnTrue = ( b ) : any => { return { color : b ? theme . colors . text . primary : theme . colors . text . secondary , } ; } ; return ( < TopNav height = { `${ TopBarHeight }px` } bg = { colors . dark } style = { { justifyContent : 'space-between' , } } > < Text px = { 3 } style = { { color : theme . colors . text . secondary } } > { userHost } < /Text> < Text style = { { ... primaryOnTrue ( clipboard ) , verticalAlign : 'text-bottom' , } } > < StyledClipboard style = { primaryOnTrue ( clipboard ) } pr = { 2 } / > Clipboard Sharing { clipboard ? 'Enabled' : 'Disabled' } < /Text> < Flex px = { 3 } > < Flex alignItems = "center" > < StyledRecordingIndicator style = { { backgroundColor : recording ? theme . colors . error . light : theme . colors . text . secondary , } } /> < Text style = { primaryOnTrue ( recording ) } > { recording ? '' : 'Not ' } Recording < /Text> < /Flex> < ActionMenu onDisconnect = { onDisconnect } / > < /Flex> < /TopNav>); } export const TopBarHeight = 40 ; const StyledClipboard = styled ( Clipboard ) `
  font-weight: ${ ( { theme } ) => theme . fontWeights . bold };
  font-size: ${ ( { theme } ) => theme . fontSizes [ 4 ] + 'px' };
  align-self: 'center';
` ; const StyledRecordingIndicator = styled . div `
  width: 10px;
  height: 10px;
  border-radius: 10px;
  margin-right: 6px;
  vertical-align: text-bottom;
` ; type Props = { userHost : string ; clipboard : boolean ; recording : boolean ; onDisconnect : VoidFunction ; } ;