65 lines
1.4 KiB
TypeScript
65 lines
1.4 KiB
TypeScript
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
|
|
className="hover:underline"
|
|
onClick={() => {
|
|
reset();
|
|
}}
|
|
type="button"
|
|
>
|
|
Try Again
|
|
</button>
|
|
</div>
|
|
);
|
|
case "pending":
|
|
// we are polling for new messages
|
|
return <div>Connected - awaiting messages</div>;
|
|
}
|
|
})}
|
|
</div>
|
|
);
|
|
}
|