Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 1x 12x 12x | import { Status } from "@shared/schema";
import { Badge } from "@/components/ui/badge";
import { Circle, PlayCircle, CheckCircle2, XCircle } from "lucide-react";
const statusConfig: Record<Status, {
label: string;
icon: React.ReactNode;
className: string;
}> = {
"not_started": {
label: "Not Started",
icon: <Circle className="h-3 w-3" />,
className: "bg-muted text-muted-foreground border-0"
},
"in_progress": {
label: "In Progress",
icon: <PlayCircle className="h-3 w-3" />,
className: "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 border-0"
},
"completed": {
label: "Completed",
icon: <CheckCircle2 className="h-3 w-3" />,
className: "bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 border-0"
},
"abandoned": {
label: "Abandoned",
icon: <XCircle className="h-3 w-3" />,
className: "bg-destructive/10 text-destructive border-0"
},
};
interface StatusBadgeProps {
status: Status;
}
export function StatusBadge({ status }: StatusBadgeProps) {
const config = statusConfig[status];
return (
<Badge
variant="secondary"
className={`${config.className} gap-1 font-medium`}
data-testid={`badge-status-${status}`}
>
{config.icon}
{config.label}
</Badge>
);
}
|