68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
type StatusType = 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'pending';
|
|
|
|
interface StatusBadgeProps {
|
|
status: StatusType;
|
|
label: string;
|
|
icon?: React.ElementType;
|
|
size?: 'sm' | 'md';
|
|
}
|
|
|
|
const statusConfig: Record<StatusType, { color: string; bg: string; border: string }> = {
|
|
success: {
|
|
color: 'text-performance-green',
|
|
bg: 'bg-performance-green/10',
|
|
border: 'border-performance-green/30',
|
|
},
|
|
warning: {
|
|
color: 'text-warning-amber',
|
|
bg: 'bg-warning-amber/10',
|
|
border: 'border-warning-amber/30',
|
|
},
|
|
error: {
|
|
color: 'text-racing-red',
|
|
bg: 'bg-racing-red/10',
|
|
border: 'border-racing-red/30',
|
|
},
|
|
info: {
|
|
color: 'text-primary-blue',
|
|
bg: 'bg-primary-blue/10',
|
|
border: 'border-primary-blue/30',
|
|
},
|
|
neutral: {
|
|
color: 'text-gray-400',
|
|
bg: 'bg-iron-gray',
|
|
border: 'border-charcoal-outline',
|
|
},
|
|
pending: {
|
|
color: 'text-warning-amber',
|
|
bg: 'bg-warning-amber/10',
|
|
border: 'border-warning-amber/30',
|
|
},
|
|
};
|
|
|
|
/**
|
|
* Status badge component for displaying status indicators.
|
|
* Used for showing status of items like invoices, sponsorships, etc.
|
|
*/
|
|
export default function StatusBadge({
|
|
status,
|
|
label,
|
|
icon: Icon,
|
|
size = 'sm',
|
|
}: StatusBadgeProps) {
|
|
const config = statusConfig[status];
|
|
const sizeClasses = size === 'sm'
|
|
? 'px-2 py-0.5 text-xs'
|
|
: 'px-3 py-1 text-sm';
|
|
|
|
return (
|
|
<span className={`inline-flex items-center gap-1.5 rounded-full font-medium border ${config.bg} ${config.color} ${config.border} ${sizeClasses}`}>
|
|
{Icon && <Icon className={size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'} />}
|
|
{label}
|
|
</span>
|
|
);
|
|
} |