78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export type BadgeTone =
|
|
| "neutral"
|
|
| "brand"
|
|
| "green"
|
|
| "amber"
|
|
| "red"
|
|
| "violet"
|
|
| "blue";
|
|
|
|
const TONES: Record<BadgeTone, string> = {
|
|
neutral: "bg-slate-100 text-slate-700 border-slate-200",
|
|
brand: "bg-brand-50 text-brand-700 border-brand-100",
|
|
green: "bg-emerald-50 text-emerald-700 border-emerald-100",
|
|
amber: "bg-amber-50 text-amber-700 border-amber-100",
|
|
red: "bg-red-50 text-red-700 border-red-100",
|
|
violet: "bg-violet-50 text-violet-700 border-violet-100",
|
|
blue: "bg-sky-50 text-sky-700 border-sky-100",
|
|
};
|
|
|
|
export function Badge({
|
|
tone = "neutral",
|
|
className,
|
|
children,
|
|
...rest
|
|
}: React.HTMLAttributes<HTMLSpanElement> & { tone?: BadgeTone }) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded-full border",
|
|
TONES[tone],
|
|
className,
|
|
)}
|
|
{...rest}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function JobStatusBadge({ status }: { status: string }) {
|
|
const map: Record<string, BadgeTone> = {
|
|
queued: "neutral",
|
|
running: "blue",
|
|
completed: "green",
|
|
failed: "red",
|
|
cancelled: "amber",
|
|
};
|
|
return <Badge tone={map[status] ?? "neutral"}>{status}</Badge>;
|
|
}
|
|
|
|
export function ArtifactTypeBadge({ type }: { type: string }) {
|
|
const map: Record<string, BadgeTone> = {
|
|
requirement: "brand",
|
|
epic: "violet",
|
|
story: "brand",
|
|
task: "blue",
|
|
architecture_decision: "violet",
|
|
document: "neutral",
|
|
source_file: "neutral",
|
|
commit: "green",
|
|
pull_request: "blue",
|
|
build: "amber",
|
|
test: "green",
|
|
security_finding: "red",
|
|
deployment: "green",
|
|
release: "green",
|
|
runtime_event: "amber",
|
|
incident: "red",
|
|
ai_analysis: "violet",
|
|
};
|
|
return <Badge tone={map[type] ?? "neutral"}>{type}</Badge>;
|
|
}
|