59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations } from "next-intl";
|
|
|
|
/**
|
|
* Visual treatment per phase. Each entry is a Tailwind class string
|
|
* applied to the badge. The `Pending` style is also used as a fallback
|
|
* for unknown phases — it's the most neutral colour.
|
|
*
|
|
* Slice 7 / Bug 31 added `Suspended`. It uses an amber-on-muted scheme
|
|
* to read as "intentionally paused" — distinct from `Error` (red) and
|
|
* `Deleting` (mute grey).
|
|
*/
|
|
const phaseStyles: Record<string, string> = {
|
|
Running: "bg-success/10 text-success border-success/20",
|
|
Ready: "bg-success/10 text-success border-success/20",
|
|
Provisioning: "bg-warning/10 text-warning border-warning/20",
|
|
// Reconfiguring shares the warning palette (yellow pulse) but renders
|
|
// a distinct label, so customers see it differently from first-time
|
|
// provisioning. Useful when packages or channel-users change and the
|
|
// pod restarts mid-life.
|
|
Reconfiguring: "bg-warning/10 text-warning border-warning/20",
|
|
Pending: "bg-text-muted/10 text-text-secondary border-border",
|
|
Suspended: "bg-amber-500/10 text-amber-400 border-amber-500/30",
|
|
Error: "bg-error/10 text-error border-error/20",
|
|
Deleting: "bg-text-muted/10 text-text-muted border-border",
|
|
};
|
|
|
|
export function StatusBadge({ phase }: { phase: string }) {
|
|
const t = useTranslations("phase");
|
|
const style = phaseStyles[phase] ?? phaseStyles.Pending;
|
|
// Translation lookup with fallback to the raw phase. Keeps things
|
|
// working if a new operator-side phase ships before the portal has
|
|
// a label for it.
|
|
const label = (() => {
|
|
try {
|
|
return t(phase);
|
|
} catch {
|
|
return phase;
|
|
}
|
|
})();
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium ${style}`}
|
|
>
|
|
{phase === "Running" && (
|
|
<span className="status-pulse h-1.5 w-1.5 rounded-full bg-success" />
|
|
)}
|
|
{phase === "Provisioning" && (
|
|
<span className="status-pulse h-1.5 w-1.5 rounded-full bg-warning" />
|
|
)}
|
|
{phase === "Reconfiguring" && (
|
|
<span className="status-pulse h-1.5 w-1.5 rounded-full bg-warning" />
|
|
)}
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|