infoalloggi-monorepo/apps/infoalloggi/src/components/subscriptionDbg.tsx

import { cn } from "~/lib/utils";
import { run } from "~/utils/utils";

export function SubscriptionStatus({
	status,
	errorMsg,
	reset,
}: {
	status: "idle" | "connecting" | "pending" | "error";
	errorMsg: string | undefined;
	reset: () => void;
}) {
	return (
		<div
			className={cn(
				"rounded-full p-2 text-sm transition-colors",
				run(() => {
					switch (status) {
						case "idle":
						case "connecting":
							return "bg-white text-gray-500 dark:bg-gray-900 dark:text-gray-400";
						case "error":
							return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200";
						case "pending":
							return "bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200";
					}
				}),
			)}
		>
			{run(() => {
				switch (status) {
					case "idle":
					case "connecting":
						// treat idle and connecting the same

						return (
							<div>
								Connecting...
								{errorMsg && " (There are connection problems)"} {errorMsg}
							</div>
						);
					case "error":
						// something went wrong
						return (
							<div>
								Error - <em>{errorMsg}</em>
								<button
									type="button"
									onClick={() => {
										reset();
									}}
									className="hover:underline"
								>
									Try Again
								</button>
							</div>
						);
					case "pending":
						// we are polling for new messages
						return <div>Connected - awaiting messages</div>;
				}
			})}
		</div>
	);
}