22 lines
776 B
TypeScript
22 lines
776 B
TypeScript
import { useNetworkStatus } from '@lume/utils/hooks/useNetworkStatus';
|
|
|
|
export function NetworkStatusIndicator() {
|
|
const isOnline = useNetworkStatus();
|
|
|
|
return (
|
|
<div className="inline-flex items-center gap-1 rounded-md px-1.5 py-1 hover:bg-zinc-900">
|
|
<div className="relative flex h-1.5 w-1.5">
|
|
<span
|
|
className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${
|
|
isOnline ? 'bg-green-400' : 'bg-red-400'
|
|
}`}
|
|
></span>
|
|
<span
|
|
className={`relative inline-flex h-1.5 w-1.5 rounded-full ${isOnline ? 'bg-green-400' : 'bg-amber-400'}`}
|
|
></span>
|
|
</div>
|
|
<p className="text-xs font-medium text-zinc-500">{isOnline ? 'Online' : 'Offline'}</p>
|
|
</div>
|
|
);
|
|
}
|