1"use client";
2
3import { cn } from "@/lib/utils";
4import { useOfflineStatus } from "@/hooks/use-offline-status";
5
6
12export function StatusChip() {
13 const status = useOfflineStatus();
14
15 const dot =
16 status.chip === "online"
17 ? "bg-emerald-500"
18 : status.chip === "reconnecting"
19 ? "bg-amber-500"
20 : "bg-zinc-400";
21 const label =
22 status.chip === "online" ? "Live" : status.chip === "reconnecting" ? "Reconnecting…" : "Offline";
23
24 return (
25 <span
26 data-testid="connection-chip"
27 aria-label={status.ariaLabel}
28 className="flex h-7 shrink-0 items-center gap-1.5 rounded-md px-2 text-xs text-foreground/70"
29 role="status"
30 >
31 <span
32 className={cn(
33 "size-2 rounded-full",
34 dot,
35
36
37 status.reconnectFlash && "animate-pulse"
38 )}
39 aria-hidden
40 />
41 <span className="hidden sm:inline">{label}</span>
42 </span>
43 );
44}
45