53 lines
1.5 KiB
JavaScript
53 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
import Box from '@material-ui/core/Box';
|
|
import SettingsIcon from '@material-ui/icons/Settings';
|
|
import IconButton from '@material-ui/core/IconButton';
|
|
import CheckCircleIcon from '@material-ui/icons/CheckCircle';
|
|
import ErrorIcon from '@material-ui/icons/Error';
|
|
import Tooltip from '@material-ui/core/Tooltip';
|
|
import { useSelector } from 'react-redux/';
|
|
|
|
function ConnectionStatus({ error }) {
|
|
if (error) {
|
|
return <ErrorIcon />;
|
|
} else {
|
|
return <CheckCircleIcon />;
|
|
}
|
|
}
|
|
|
|
export default function Header() {
|
|
const comConnectionStatus = useSelector((state) => state.comConnectionStatusReducer);
|
|
|
|
return (
|
|
<div>
|
|
<Box
|
|
bgcolor="primary.main"
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
height: 30,
|
|
}}>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
justifyItems: 'space-between',
|
|
width: '100%',
|
|
marginLeft: 10,
|
|
marginRight: 10,
|
|
}}>
|
|
<Tooltip title={comConnectionStatus ? 'Click to reconnect' : 'Click to disconnect'}>
|
|
<IconButton size="small">
|
|
<ConnectionStatus error={comConnectionStatus} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title="Open Settings">
|
|
<IconButton size="small">
|
|
<SettingsIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</div>
|
|
</Box>
|
|
</div>
|
|
);
|
|
}
|