init

frontend/src/components/state-badge.tsx

@@ -0,0 +1,25 @@
+import { Badge } from "@/components/ui/badge";
+
+export type CertState = "valid" | "expiring" | "expired" | "pending";
+
+const STATE_TONE: Record<CertState, "success" | "warn" | "danger" | "neutral"> = {
+  valid: "success",
+  expiring: "warn",
+  expired: "danger",
+  pending: "neutral",
+};
+
+const STATE_LABEL: Record<CertState, string> = {
+  valid: "Gültig",
+  expiring: "Erneuerung fällig",
+  expired: "Abgelaufen",
+  pending: "Ausstehend",
+};
+
+export function StateBadge({ state }: { state: CertState }) {
+  return (
+    <Badge tone={STATE_TONE[state]} dot>
+      {STATE_LABEL[state]}
+    </Badge>
+  );
+}