35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
|
import { Badge } from "@/Components/ui/badge";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
export type StatusVariant =
|
||
|
|
| "neutral"
|
||
|
|
| "info"
|
||
|
|
| "warning"
|
||
|
|
| "success"
|
||
|
|
| "destructive";
|
||
|
|
|
||
|
|
interface StatusBadgeProps {
|
||
|
|
variant: StatusVariant;
|
||
|
|
children: React.ReactNode;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const variantStyles: Record<StatusVariant, string> = {
|
||
|
|
neutral: "bg-gray-100 text-gray-800 border-gray-200 hover:bg-gray-100", // Draft, Cancelled(sometimes), Closed
|
||
|
|
info: "bg-blue-100 text-blue-800 border-blue-200 hover:bg-blue-100", // Processing, Active
|
||
|
|
warning: "bg-amber-100 text-amber-800 border-amber-200 hover:bg-amber-100", // Pending, Review
|
||
|
|
success: "bg-green-100 text-green-800 border-green-200 hover:bg-green-100", // Completed, Approved
|
||
|
|
destructive: "bg-red-100 text-red-800 border-red-200 hover:bg-red-100", // Voided, Rejected, High Risk
|
||
|
|
};
|
||
|
|
|
||
|
|
export function StatusBadge({ variant, children, className }: StatusBadgeProps) {
|
||
|
|
return (
|
||
|
|
<Badge
|
||
|
|
variant="outline"
|
||
|
|
className={cn(variantStyles[variant], "font-medium border", className)}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</Badge>
|
||
|
|
);
|
||
|
|
}
|