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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 20x 1x 1x | 'use client';
export interface StatusBadgeProps {
/** Error status */
status: string;
/** Optional additional className */
className?: string;
}
const statusConfig: Record<string, { label: string; className: string }> = {
open: {
label: 'Open',
className: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
},
resolved: {
label: 'Resolved',
className: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
},
ignored: {
label: 'Ignored',
className: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400',
},
snoozed: {
label: 'Snoozed',
className: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
},
};
/**
* StatusBadge Component
*
* Displays error status with appropriate color coding.
*/
export function StatusBadge({ status, className = '' }: StatusBadgeProps) {
const config = statusConfig[status] || statusConfig.open;
return (
<span
className={`inline-flex items-center px-2 py-0.5 text-xs font-medium rounded ${config.className} ${className}`}
data-testid="status-badge"
>
{config.label}
</span>
);
}
export default StatusBadge;
|