Skip to main content

packages/ui/src/components/status-pill.tsx

Metadata​

Indexed Symbols​

  • StatusPill (line 18, function) - Implements status pill for module behavior.

Markdown Headings (if applicable)​

No markdown headings detected.

Source Preview​

import * as React from "react";
import { clsx } from "clsx";

const toneMap: Record<string, string> = {
  healthy: "bg-[var(--accent-blue)]/15 text-[var(--accent-blue)] border-[var(--accent-blue)]/30",
  warning: "bg-[var(--accent-red)]/10 text-[var(--accent-red)] border-[var(--accent-red)]/30",
  critical: "bg-[var(--accent-red)]/18 text-[var(--accent-red)] border-[var(--accent-red)]/40",
  queued: "bg-[var(--ink-soft)]/20 text-[var(--ink-muted)] border-[var(--stroke-strong)]",
  running: "bg-[var(--ink-base)]/10 text-[var(--ink-base)] border-[var(--stroke-strong)]",
  succeeded: "bg-[var(--accent-blue)]/15 text-[var(--accent-blue)] border-[var(--accent-blue)]/30",
  failed: "bg-[var(--accent-red)]/18 text-[var(--accent-red)] border-[var(--accent-red)]/40"
};

type StatusPillProps = {
  status: string;
};

export function StatusPill({ status }: StatusPillProps) {
  return (
    <span
      className={clsx(
        "inline-flex rounded-full border px-2.5 py-1 text-xs font-semibold uppercase tracking-[0.08em]",
        toneMap[status] ?? "bg-[var(--ink-soft)]/20 text-[var(--ink-muted)] border-[var(--stroke-subtle)]"
      )}
    >