66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface StatusBadgeProps {
|
|
status: string;
|
|
config?: {
|
|
icon: LucideIcon;
|
|
color: string;
|
|
bg: string;
|
|
border: string;
|
|
label: string;
|
|
};
|
|
className?: string;
|
|
}
|
|
|
|
export const StatusBadge = ({ status, config, className = '' }: StatusBadgeProps) => {
|
|
const defaultConfig = {
|
|
scheduled: {
|
|
icon: () => null,
|
|
color: 'text-primary-blue',
|
|
bg: 'bg-primary-blue/10',
|
|
border: 'border-primary-blue/30',
|
|
label: 'Scheduled',
|
|
},
|
|
running: {
|
|
icon: () => null,
|
|
color: 'text-performance-green',
|
|
bg: 'bg-performance-green/10',
|
|
border: 'border-performance-green/30',
|
|
label: 'LIVE',
|
|
},
|
|
completed: {
|
|
icon: () => null,
|
|
color: 'text-gray-400',
|
|
bg: 'bg-gray-500/10',
|
|
border: 'border-gray-500/30',
|
|
label: 'Completed',
|
|
},
|
|
cancelled: {
|
|
icon: () => null,
|
|
color: 'text-warning-amber',
|
|
bg: 'bg-warning-amber/10',
|
|
border: 'border-warning-amber/30',
|
|
label: 'Cancelled',
|
|
},
|
|
};
|
|
|
|
const badgeConfig = config || defaultConfig[status as keyof typeof defaultConfig] || {
|
|
icon: () => null,
|
|
color: 'text-gray-400',
|
|
bg: 'bg-gray-500/10',
|
|
border: 'border-gray-500/30',
|
|
label: status,
|
|
};
|
|
|
|
const Icon = badgeConfig.icon;
|
|
|
|
return (
|
|
<div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${badgeConfig.bg} ${badgeConfig.border} border ${className}`}>
|
|
{Icon && <Icon className={`w-3.5 h-3.5 ${badgeConfig.color}`} />}
|
|
<span className={`text-xs font-medium ${badgeConfig.color}`}>
|
|
{badgeConfig.label}
|
|
</span>
|
|
</div>
|
|
);
|
|
}; |