47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import { Badge } from "@/Components/ui/badge";
|
|
|
|
export type GoodsReceiptStatus = 'processing' | 'completed' | 'cancelled';
|
|
|
|
export const GOODS_RECEIPT_STATUS_CONFIG: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" | "success" | "warning" }> = {
|
|
processing: { label: "處理中", variant: "warning" },
|
|
completed: { label: "已完成", variant: "success" },
|
|
cancelled: { label: "已取消", variant: "destructive" },
|
|
};
|
|
|
|
interface GoodsReceiptStatusBadgeProps {
|
|
status: string;
|
|
className?: string;
|
|
}
|
|
|
|
export default function GoodsReceiptStatusBadge({
|
|
status,
|
|
className,
|
|
}: GoodsReceiptStatusBadgeProps) {
|
|
const config = GOODS_RECEIPT_STATUS_CONFIG[status] || { label: "未知", variant: "outline" };
|
|
|
|
// Apply custom styling based on variant mapping if not using standard badge variants
|
|
let badgeClass = "";
|
|
switch (config.variant) {
|
|
case "success":
|
|
badgeClass = "bg-green-100 text-green-800 hover:bg-green-200 border-green-200";
|
|
break;
|
|
case "warning":
|
|
badgeClass = "bg-yellow-100 text-yellow-800 hover:bg-yellow-200 border-yellow-200";
|
|
break;
|
|
case "destructive":
|
|
badgeClass = "bg-red-100 text-red-800 hover:bg-red-200 border-red-200";
|
|
break;
|
|
default:
|
|
badgeClass = "bg-gray-100 text-gray-800 hover:bg-gray-200 border-gray-200";
|
|
}
|
|
|
|
return (
|
|
<Badge
|
|
variant="outline"
|
|
className={`${className} font-medium px-2.5 py-0.5 rounded-full border ${badgeClass}`}
|
|
>
|
|
{config.label}
|
|
</Badge>
|
|
);
|
|
}
|