klg-asutk-app/components/ui/StatusBadge.tsx

37 lines
1.4 KiB
TypeScript

'use client';
import { statusIcons, type StatusKey } from '@/icons/refly-icons';
import { Icon } from '@/components/Icon';
interface Props {
status: string;
colorMap?: Record<string, string>;
labelMap?: Record<string, string>;
showIcon?: boolean;
}
const defaults: Record<string, string> = {
active: 'bg-green-500', valid: 'bg-green-500', completed: 'bg-green-500', approved: 'bg-green-500',
in_progress: 'bg-blue-500', submitted: 'bg-blue-500',
draft: 'bg-gray-400', planned: 'bg-purple-500', pending: 'bg-gray-400',
critical: 'bg-red-600', high: 'bg-orange-500', medium: 'bg-yellow-500', low: 'bg-green-500',
rejected: 'bg-red-700', expired: 'bg-red-500', suspended: 'bg-orange-500',
under_review: 'bg-orange-500', remarks: 'bg-red-500',
maintenance: 'bg-orange-500', storage: 'bg-gray-400', inactive: 'bg-red-500',
overdue: 'bg-red-600', deferred: 'bg-yellow-600',
};
export default function StatusBadge({ status, colorMap, labelMap, showIcon = true }: Props) {
const color = colorMap?.[status] || defaults[status] || 'bg-gray-400';
const label = labelMap?.[status] || status;
const StatusIcon = statusIcons[status as StatusKey];
return (
<span className={`status-badge ${color} inline-flex items-center gap-1.5`}>
{showIcon && StatusIcon && (
<Icon icon={StatusIcon} className="size-4 shrink-0 opacity-90" strokeWidth={1.75} />
)}
{label}
</span>
);
}