50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
|
/**
|
||
|
|
* ConnectionStatusIndicator - Visual indicator for WebSocket connection status.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { ConnectionStatus } from '../../hooks/useSpecWebSocket';
|
||
|
|
|
||
|
|
interface ConnectionStatusIndicatorProps {
|
||
|
|
status: ConnectionStatus;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Visual indicator for WebSocket connection status.
|
||
|
|
* Can be used in the canvas UI to show sync state.
|
||
|
|
*/
|
||
|
|
export function ConnectionStatusIndicator({
|
||
|
|
status,
|
||
|
|
className = '',
|
||
|
|
}: ConnectionStatusIndicatorProps) {
|
||
|
|
const statusConfig = {
|
||
|
|
disconnected: {
|
||
|
|
color: 'bg-gray-500',
|
||
|
|
label: 'Disconnected',
|
||
|
|
},
|
||
|
|
connecting: {
|
||
|
|
color: 'bg-yellow-500 animate-pulse',
|
||
|
|
label: 'Connecting...',
|
||
|
|
},
|
||
|
|
connected: {
|
||
|
|
color: 'bg-green-500',
|
||
|
|
label: 'Connected',
|
||
|
|
},
|
||
|
|
reconnecting: {
|
||
|
|
color: 'bg-yellow-500 animate-pulse',
|
||
|
|
label: 'Reconnecting...',
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
const config = statusConfig[status];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`flex items-center gap-2 ${className}`}>
|
||
|
|
<div className={`w-2 h-2 rounded-full ${config.color}`} />
|
||
|
|
<span className="text-xs text-dark-400">{config.label}</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ConnectionStatusIndicator;
|