Spaces:
Paused
Paused
File size: 1,924 Bytes
5a81b95 | 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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | import React from 'react';
import { Wifi, WifiOff, Radio } from 'lucide-react';
import { cn } from '@/lib/utils';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
interface LiveDataIndicatorProps {
status: 'connecting' | 'connected' | 'disconnected' | 'simulated';
className?: string;
}
export function LiveDataIndicator({ status, className }: LiveDataIndicatorProps) {
const statusConfig = {
connecting: {
icon: Wifi,
label: 'Connecting...',
color: 'text-yellow-500',
pulse: true,
},
connected: {
icon: Wifi,
label: 'Live Data',
color: 'text-green-500',
pulse: true,
},
disconnected: {
icon: WifiOff,
label: 'Disconnected',
color: 'text-destructive',
pulse: false,
},
simulated: {
icon: Radio,
label: 'Simulated Data',
color: 'text-primary',
pulse: true,
},
};
const config = statusConfig[status];
const Icon = config.icon;
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className={cn('flex items-center gap-2', className)}>
<div className="relative">
<Icon className={cn('h-4 w-4', config.color)} />
{config.pulse && (
<span className={cn(
'absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full',
status === 'connected' ? 'bg-green-500' : 'bg-primary',
'animate-pulse'
)} />
)}
</div>
<span className={cn('text-xs font-medium', config.color)}>
{status === 'simulated' ? 'LIVE' : status.toUpperCase()}
</span>
</div>
</TooltipTrigger>
<TooltipContent>
<p>{config.label}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}
|