storybid/packages/client/src/components/ConnectivityBanner.tsx

/**
 * Thin connectivity banner — used on pages outside the BidderLayout shell
 * (auth pages, staff tools, display board).
 *
 * Hidden when fully connected.
 */
import { useConnectivityStore } from "../store/connectivity.js";

const CONFIGS = {
  local:   { bg: "bg-gold-500",  text: "Local network — offline-capable" },
  offline: { bg: "bg-red-500",   text: "Offline — bids will sync when reconnected" },
} as const;

export function ConnectivityBanner() {
  const status = useConnectivityStore((s) => s.status);
  if (status === "connected") return null;

  const cfg = CONFIGS[status as keyof typeof CONFIGS];
  if (!cfg) return null;

  return (
    <div className={`${cfg.bg} text-white text-center text-xs py-1.5 px-4 font-semibold tracking-wide`}>
      {cfg.text}
    </div>
  );
}