1
import type { SyncStatus } from "@/client/hooks/use-sync";
2
 
3
const STATUS_META: Record<SyncStatus, { class: string; label: string; shape: string }> = {
4
  connected: { class: "bg-emerald-400", label: "Connected", shape: "rounded-full" },
5
  connecting: { class: "bg-amber-400 animate-pulse", label: "Syncing", shape: "rounded-sm" },
6
  disconnected: { class: "bg-zinc-500", label: "Offline", shape: "rounded-full ring-1 ring-zinc-400" },
7
};
8
 
9
export function SyncStatusDot({ status }: { status: SyncStatus }) {
10
  const meta = STATUS_META[status];
11
  return (
12
    <div className="flex items-center gap-1.5" title={meta.label}>
13
      <span className={`inline-block h-2 w-2 ${meta.shape} ${meta.class}`} />
14
      <span className="text-xs text-zinc-400">{meta.label}</span>
15
    </div>
16
  );
17
}