69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
'use client';
|
|
import { Wifi, WifiOff, RefreshCw } from 'lucide-react';
|
|
import { Badge, Button } from '@/components/ui';
|
|
import type { ConnectionStatus as ConnectionStatusType } from '@/lib/hooks';
|
|
|
|
type ConnectionStatusProps = {
|
|
status: ConnectionStatusType;
|
|
onReconnect?: () => void;
|
|
showAsButton?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const getConnectionIcon = (status: ConnectionStatusType) => {
|
|
switch (status) {
|
|
case 'connected':
|
|
return <Wifi className='w-4 h-4 text-green-500' />;
|
|
case 'connecting':
|
|
return <Wifi className='w-4 h-4 text-yellow-500 animate-pulse' />;
|
|
case 'disconnected':
|
|
return <WifiOff className='w-4 h-4 text-red-500' />;
|
|
case 'updating':
|
|
return <RefreshCw className='w-4 h-4 text-blue-500 animate-spin' />;
|
|
}
|
|
};
|
|
|
|
const getConnectionText = (status: ConnectionStatusType) => {
|
|
switch (status) {
|
|
case 'connected':
|
|
return 'Connected';
|
|
case 'connecting':
|
|
return 'Connecting...';
|
|
case 'disconnected':
|
|
return 'Disconnected';
|
|
case 'updating':
|
|
return 'Updating...';
|
|
}
|
|
};
|
|
|
|
export const ConnectionStatus = ({
|
|
status,
|
|
onReconnect,
|
|
showAsButton = false,
|
|
className = '',
|
|
}: ConnectionStatusProps) => {
|
|
if (showAsButton && status === 'disconnected' && onReconnect) {
|
|
return (
|
|
<Button
|
|
variant='outline'
|
|
size='sm'
|
|
onClick={onReconnect}
|
|
className={`flex items-center gap-2 cursor-pointer ${className}`}
|
|
>
|
|
{getConnectionIcon(status)}
|
|
<span className='text-base'>{getConnectionText(status)}</span>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Badge
|
|
variant='outline'
|
|
className={`flex items-center gap-2 ${className}`}
|
|
>
|
|
{getConnectionIcon(status)}
|
|
<span className='text-base'>{getConnectionText(status)}</span>
|
|
</Badge>
|
|
);
|
|
};
|