spb/market-atlas

1"use client";23import { useSyncExternalStore } from "react";4import { marketStream } from "@/lib/stream";5import { cx } from "@/lib/format";67export function StreamIndicator({ className }: { className?: string }) {8  const state = useSyncExternalStore(9    (l) => marketStream().listenState(l),10    () => marketStream().state,11    () => "idle" as const,12  );13  const label = state === "open" ? "Stream live" : state === "connecting" || state === "reconnecting" ? "Connecting…" : "Stream idle";14  return (15    <span className={cx("items-center gap-1.5 px-2 text-[11px] text-ink-3", className)} title="Market Atlas WebSocket stream">16      <span className={cx("inline-block h-1.5 w-1.5 rounded-full", state === "open" ? "bg-positive live-dot" : state === "idle" || state === "closed" ? "bg-stale" : "bg-warning")} />17      {label}18    </span>19  );20}21