41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
|
import { Badge } from "@/components/ui/badge";
|
||
|
|
|
||
|
|
type Status = "online" | "starting" | "offline";
|
||
|
|
|
||
|
|
const config = {
|
||
|
|
online: {
|
||
|
|
label: "Online",
|
||
|
|
className: "border-emerald-500/30 bg-emerald-500/10 text-emerald-300",
|
||
|
|
dot: "bg-emerald-400 shadow-[0_0_6px_var(--color-emerald-400)]",
|
||
|
|
pulse: false,
|
||
|
|
},
|
||
|
|
starting: {
|
||
|
|
label: "Starting",
|
||
|
|
className: "border-amber-500/30 bg-amber-500/10 text-amber-300",
|
||
|
|
dot: "bg-amber-400",
|
||
|
|
pulse: true,
|
||
|
|
},
|
||
|
|
offline: {
|
||
|
|
label: "Offline",
|
||
|
|
className: "border-red-500/30 bg-red-500/10 text-red-300",
|
||
|
|
dot: "bg-red-400",
|
||
|
|
pulse: false,
|
||
|
|
},
|
||
|
|
} as const;
|
||
|
|
|
||
|
|
export function StatusBadge({ status }: { status: Status }) {
|
||
|
|
const c = config[status];
|
||
|
|
return (
|
||
|
|
<Badge variant="outline" className={`gap-1.5 ${c.className}`}>
|
||
|
|
<span className={`h-1.5 w-1.5 rounded-full ${c.dot} ${c.pulse ? "animate-pulse" : ""}`} />
|
||
|
|
{c.label}
|
||
|
|
</Badge>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function statusFromServer(s: { online: boolean; starting?: boolean }): Status {
|
||
|
|
if (s.online) return "online";
|
||
|
|
if (s.starting) return "starting";
|
||
|
|
return "offline";
|
||
|
|
}
|