50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
interface BadgeProps {
|
|
label: string;
|
|
variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'purple';
|
|
}
|
|
|
|
const variantStyles: Record<string, string> = {
|
|
default: 'bg-surface-100 dark:bg-surface-700 text-surface-600 dark:text-surface-300',
|
|
success: 'bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400',
|
|
warning: 'bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400',
|
|
error: 'bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-400',
|
|
info: 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400',
|
|
purple: 'bg-violet-50 dark:bg-violet-900/30 text-violet-700 dark:text-violet-400',
|
|
};
|
|
|
|
export function Badge({ label, variant = 'default' }: BadgeProps) {
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center px-2 py-0.5 text-[11px] font-medium rounded-full ${variantStyles[variant]}`}
|
|
role="status"
|
|
aria-label={label}
|
|
>
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function statusBadgeVariant(status: string): BadgeProps['variant'] {
|
|
const map: Record<string, BadgeProps['variant']> = {
|
|
active: 'success',
|
|
resolved: 'success',
|
|
paid: 'success',
|
|
confirmed: 'success',
|
|
open: 'info',
|
|
sent: 'info',
|
|
pending: 'warning',
|
|
in_progress: 'warning',
|
|
partial: 'warning',
|
|
suspended: 'warning',
|
|
overdue: 'error',
|
|
cancelled: 'error',
|
|
inactive: 'error',
|
|
rejected: 'error',
|
|
void: 'default',
|
|
draft: 'default',
|
|
postpaid: 'info',
|
|
prepaid: 'purple',
|
|
};
|
|
return map[status] || 'default';
|
|
}
|