karbe/src/components/admin/StatusBadge.tsx

43 lines
1.5 KiB
TypeScript

const TONES = {
draft: "bg-zinc-100 text-zinc-700 ring-zinc-300",
published: "bg-emerald-100 text-emerald-800 ring-emerald-300",
archived: "bg-amber-100 text-amber-800 ring-amber-300",
pending: "bg-sky-100 text-sky-800 ring-sky-300",
confirmed: "bg-emerald-100 text-emerald-800 ring-emerald-300",
cancelled: "bg-rose-100 text-rose-700 ring-rose-300",
completed: "bg-zinc-100 text-zinc-700 ring-zinc-300",
authorized: "bg-indigo-100 text-indigo-800 ring-indigo-300",
succeeded: "bg-emerald-100 text-emerald-800 ring-emerald-300",
failed: "bg-rose-100 text-rose-700 ring-rose-300",
refunded: "bg-amber-100 text-amber-800 ring-amber-300",
active: "bg-emerald-100 text-emerald-800 ring-emerald-300",
inactive: "bg-zinc-100 text-zinc-500 ring-zinc-300",
} as const;
const LABELS: Record<string, string> = {
DRAFT: "Brouillon",
PUBLISHED: "Publié",
ARCHIVED: "Archivé",
PENDING: "En attente",
CONFIRMED: "Confirmé",
CANCELLED: "Annulé",
COMPLETED: "Terminé",
AUTHORIZED: "Autorisé",
SUCCEEDED: "Payé",
FAILED: "Échec",
REFUNDED: "Remboursé",
ACTIVE: "Actif",
INACTIVE: "Inactif",
};
export function StatusBadge({ status }: { status: string }) {
const key = status.toLowerCase() as keyof typeof TONES;
const tone = TONES[key] ?? TONES.draft;
return (
<span
className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wider ring-1 ring-inset ${tone}`}
>
{LABELS[status] ?? status}
</span>
);
}