22 lines
700 B
TypeScript
22 lines
700 B
TypeScript
|
import { useConnectivityStore } from "../store/connectivity.js";
|
|||
|
|
|
|||
|
|
const labels: Record<string, { text: string; className: string }> = {
|
|||
|
|
connected: { text: "Connected", className: "bg-green-500" },
|
|||
|
|
local: { text: "Local network – offline-capable", className: "bg-yellow-500" },
|
|||
|
|
offline: { text: "Offline – bids will sync when reconnected", className: "bg-red-500" },
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export function ConnectivityBanner() {
|
|||
|
|
const status = useConnectivityStore((s) => s.status);
|
|||
|
|
|
|||
|
|
if (status === "connected") return null;
|
|||
|
|
|
|||
|
|
const { text, className } = labels[status]!;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className={`${className} text-white text-center text-sm py-1 px-4 font-medium`}>
|
|||
|
|
{text}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|