69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
// Fichier : src/components/ui/StatusBadge.tsx
|
|
|
|
import React from 'react';
|
|
import { cn } from '@/utils/utils';
|
|
import type { AegisStatus } from '@/types/Status';
|
|
|
|
interface StatusBadgeProps {
|
|
status: AegisStatus;
|
|
className?: string;
|
|
}
|
|
|
|
// Configuration visuelle unique pour chaque statut
|
|
const STATUS_CONFIG: Record<AegisStatus, { bg: string; dot: string }> = {
|
|
// Statuts Infrastructure & Contrats Positifs
|
|
'Opérationnel': {
|
|
bg: 'bg-emerald-50 text-emerald-700 border-emerald-200/60',
|
|
dot: 'bg-emerald-500',
|
|
},
|
|
'Actif': {
|
|
bg: 'bg-emerald-50 text-emerald-700 border-emerald-200/60',
|
|
dot: 'bg-emerald-500',
|
|
},
|
|
'Ouvert': { bg: 'bg-blue-50 text-blue-700 border-blue-200/60', dot: 'bg-blue-500' },
|
|
|
|
// Statuts Intermédiaires / En cours
|
|
'Dégradé': {
|
|
bg: 'bg-amber-50 text-amber-700 border-amber-200/60',
|
|
dot: 'bg-amber-500',
|
|
},
|
|
'En Déploiement': {
|
|
bg: 'bg-blue-50 text-blue-700 border-blue-200/60',
|
|
dot: 'bg-blue-500',
|
|
},
|
|
'En Analyse': { bg: 'bg-amber-50 text-amber-700 border-amber-200/60', dot: 'bg-amber-500' },
|
|
|
|
// Statuts Alertes / Inactifs
|
|
'Hors Ligne': {
|
|
bg: 'bg-red-50 text-red-700 border-red-200/60',
|
|
dot: 'bg-red-500',
|
|
},
|
|
'Annulé': {
|
|
bg: 'bg-slate-100 text-slate-700 border-slate-200',
|
|
dot: 'bg-slate-400',
|
|
},
|
|
'Résolu': { bg: 'bg-emerald-50 text-emerald-700 border-emerald-200/60', dot: 'bg-emerald-500' },
|
|
};
|
|
|
|
export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className }) => {
|
|
// Récupération de la configuration ou fallback de sécurité
|
|
const config = STATUS_CONFIG[status] || {
|
|
bg: 'bg-slate-50 text-slate-600 border-slate-200',
|
|
dot: 'bg-slate-400',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"px-2.5 py-1 rounded-full text-xs font-semibold inline-flex items-center border transition-colors min-w-fit max-h-fit",
|
|
config.bg,
|
|
className
|
|
)}
|
|
>
|
|
<span className={cn("w-1.5 h-1.5 rounded-full mr-2 shrink-0", config.dot)} />
|
|
{status}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StatusBadge; |