demeter

 1export const STATUS_COLORS = {
 2  Healthy: {
 3    bg: "rgba(74,222,128,0.12)",
 4    text: "var(--green)",
 5    border: "rgba(74,222,128,0.3)",
 6  },
 7  Attention: {
 8    bg: "rgba(245,158,11,0.12)",
 9    text: "var(--amber)",
10    border: "rgba(245,158,11,0.3)",
11  },
12  Critical: {
13    bg: "rgba(248,113,113,0.12)",
14    text: "var(--red)",
15    border: "rgba(248,113,113,0.3)",
16  },
17};
18
19export default function StatusBadge({
20  status,
21  label,
22  className = "",
23  style = {},
24}) {
25  const st = STATUS_COLORS[status] || STATUS_COLORS.Healthy;
26  return (
27    <div
28      className={className}
29      style={{
30        fontSize: 10,
31        fontFamily: "DM Mono, monospace",
32        padding: "3px 8px",
33        borderRadius: 20,
34        background: st.bg,
35        color: st.text,
36        border: `1px solid ${st.border}`,
37        display: "inline-block",
38        ...style,
39      }}
40    >
41      {label || status.toUpperCase()}
42    </div>
43  );
44}