Files
Codewalkers/packages/web/src/components/StatusBadge.tsx
Lukas May da4152264c feat(web): Pipeline visualization, phase content editing, and review tab
Pipeline view groups phases by dependency depth with DAG visualization.
Phase detail panel with Tiptap rich content editor and auto-save.
Code review tab with diff viewer and comment threads (dummy data).
Centralized live updates hook replaces scattered subscription boilerplate.
Extract agent output parsing into shared utility. Inbox detail panel,
account cards, and agent action components.
2026-02-09 22:33:40 +01:00

37 lines
1.2 KiB
TypeScript

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
const statusStyles: Record<string, string> = {
// Initiative statuses
active: "bg-blue-100 text-blue-800 hover:bg-blue-100/80 border-blue-200",
completed: "bg-green-100 text-green-800 hover:bg-green-100/80 border-green-200",
archived: "bg-gray-100 text-gray-800 hover:bg-gray-100/80 border-gray-200",
// Phase statuses
pending: "bg-gray-100 text-gray-800 hover:bg-gray-100/80 border-gray-200",
approved: "bg-amber-100 text-amber-800 hover:bg-amber-100/80 border-amber-200",
in_progress: "bg-blue-100 text-blue-800 hover:bg-blue-100/80 border-blue-200",
blocked: "bg-red-100 text-red-800 hover:bg-red-100/80 border-red-200",
};
const defaultStyle = "bg-gray-100 text-gray-800 hover:bg-gray-100/80 border-gray-200";
function formatStatusText(status: string): string {
return status.replace(/_/g, " ").toUpperCase();
}
interface StatusBadgeProps {
status: string;
className?: string;
}
export function StatusBadge({ status, className }: StatusBadgeProps) {
const style = statusStyles[status] ?? defaultStyle;
return (
<Badge className={cn(style, className)}>
{formatStatusText(status)}
</Badge>
);
}