type Status = "live" | "draft" | "archived" | "scheduled";

const STYLES: Record<Status, { dot: string; label: string; bg: string }> = {
  live:      { dot: "#2A3D2F", label: "Live",      bg: "#FAFAF8" },
  draft:     { dot: "#6B6B66", label: "Draft",     bg: "#FAFAF8" },
  archived:  { dot: "#a13",    label: "Archived",  bg: "#FAFAF8" },
  scheduled: { dot: "#b88a2a", label: "Scheduled", bg: "#FAFAF8" },
};

function Badge({ status }: { status: Status }) {
  const s = STYLES[status];
  return (
    <span
      className="inline-flex items-center gap-2 px-3 py-1 border border-[#1111111A]"
      style={{
        background: s.bg,
        fontFamily: "ui-monospace, 'SF Mono', monospace",
        fontSize: 11,
        textTransform: "uppercase",
        letterSpacing: "0.14em",
        color: "#111111",
      }}
    >
      <span
        className="w-1.5 h-1.5 rounded-full"
        style={{ background: s.dot }}
      />
      {s.label}
    </span>
  );
}

export function StatusBadge() {
  return (
    <div className="bg-[#F4F3EF] p-12 grid place-items-center min-h-[200px]">
      <div className="flex flex-wrap gap-3 justify-center">
        <Badge status="live" />
        <Badge status="scheduled" />
        <Badge status="draft" />
        <Badge status="archived" />
      </div>
    </div>
  );
}
Status Badge Set
