| | |
| | | {mode === MAP_MODE.OBSERVER_MODE && ( |
| | | <> |
| | | <Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}> |
| | | <PulseSignal negative flag={rcsStatus} width={12} /> |
| | | <PulseSignal |
| | | negative |
| | | negativeColor = '#a4b0be' |
| | | flag={rcsStatus} |
| | | width={12} |
| | | /> |
| | | </Box> |
| | | <Button |
| | | variant="contained" |
| | |
| | | import * as React from 'react'; |
| | | import { Paper, Typography, Box, Chip, Avatar } from '@mui/material'; |
| | | import { teal } from '@mui/material/colors'; |
| | | import { teal, red } from '@mui/material/colors'; |
| | | |
| | | const PulseSignal = (props) => { |
| | | const { flag = true, width = 8, negative = false, ...rest } = props; |
| | | const { |
| | | flag = true, |
| | | width = 8, |
| | | negative = false, |
| | | positiveColor = teal[400], |
| | | negativeColor = red[400], |
| | | ...rest |
| | | } = props; |
| | | |
| | | return ( |
| | | <> |
| | |
| | | width: width, |
| | | height: width, |
| | | borderRadius: '50%', |
| | | backgroundColor: `${teal[400]}`, |
| | | backgroundColor: positiveColor, |
| | | display: 'inline-block', |
| | | animation: `pulse ${negative ? '2' : '1.2'}s infinite`, |
| | | '@keyframes pulse': { |
| | |
| | | width: width + width / 10, |
| | | height: width + width / 10, |
| | | borderRadius: '50%', |
| | | backgroundColor: '#f44336', |
| | | backgroundColor: negativeColor, |
| | | display: 'inline-block', |
| | | }} |
| | | /> |