File size: 1,377 Bytes
7fcdb70 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import React from 'react';
import { Box, Chip, keyframes } from '@mui/material';
import CircleIcon from '@mui/icons-material/Circle';
interface ConnectionStatusProps {
isConnected: boolean;
}
// Pulse animation for connected indicator
const pulse = keyframes`
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
`;
export const ConnectionStatus: React.FC<ConnectionStatusProps> = ({ isConnected }) => {
return (
<Chip
label={isConnected ? 'Backend Online' : 'Backend Offline'}
deleteIcon={
<CircleIcon
sx={{
fontSize: 6,
animation: isConnected ? `${pulse} 2s ease-in-out infinite` : 'none',
}}
/>
}
onDelete={() => {}} // Required for deleteIcon to show
size="small"
sx={{
backgroundColor: 'action.hover',
border: '1px solid',
borderColor: 'divider',
color: 'text.primary',
fontSize: '0.7rem',
fontWeight: 500,
height: 'auto',
'& .MuiChip-label': {
px: 1,
py: 0.5,
},
'& .MuiChip-deleteIcon': {
color: isConnected ? '#10b981' : '#ef4444',
marginRight: 0.5,
'&:hover': {
color: isConnected ? '#10b981' : '#ef4444',
},
},
}}
/>
);
};
|