import React from 'react'; import { Theme, Badge } from '@material-ui/core'; import { useTranslation } from 'react-i18next'; import { makeStyles, createStyles, withStyles } from '@material-ui/core/styles'; import { green, grey, orange } from '@material-ui/core/colors'; import clsx from 'clsx'; type StatusBarConnectionProps = { status: 'online' | 'offline' }; const StyledBadge = withStyles((theme: Theme) => createStyles({ badge: { left: -8, bottom: 8, color: grey[500], backgroundColor: green[400] } }), )(Badge); const useStyles = makeStyles((theme: Theme) => createStyles({ offline: { '& .MuiBadge-badge': { backgroundColor: orange[400] } }, online: { '& .MuiBadge-badge': { backgroundColor: green[400] } } }) ); const StatusBarConnection: React.FC<StatusBarConnectionProps> = (props) => { const styles = useStyles(); const { t } = useTranslation(); return ( <StyledBadge className={styles[props.status]} variant="dot" anchorOrigin={{ vertical: 'bottom', horizontal: 'left', }}> <span> { clsx( props.status === 'online' && t('online').toLowerCase(), props.status !== 'online' && t('offline').toLowerCase() ) } </span> </StyledBadge> ); }; export default StatusBarConnection;