55 lines
1.1 KiB
JavaScript
55 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
|
|
const statusConfig = {
|
|
online: {
|
|
label: 'En ligne',
|
|
className: 'status-online',
|
|
dotColor: 'bg-emerald-400',
|
|
},
|
|
offline: {
|
|
label: 'Hors ligne',
|
|
className: 'status-offline',
|
|
dotColor: 'bg-gray-400',
|
|
},
|
|
error: {
|
|
label: 'Erreur',
|
|
className: 'status-error',
|
|
dotColor: 'bg-red-400',
|
|
},
|
|
unknown: {
|
|
label: 'Inconnu',
|
|
className: 'status-warning',
|
|
dotColor: 'bg-amber-400',
|
|
},
|
|
running: {
|
|
label: 'En cours',
|
|
className: 'status-warning',
|
|
dotColor: 'bg-amber-400',
|
|
},
|
|
success: {
|
|
label: 'Succès',
|
|
className: 'status-online',
|
|
dotColor: 'bg-emerald-400',
|
|
},
|
|
failed: {
|
|
label: 'Échoué',
|
|
className: 'status-error',
|
|
dotColor: 'bg-red-400',
|
|
},
|
|
};
|
|
|
|
export default function StatusBadge({ status, size = 'sm' }) {
|
|
const config = statusConfig[status] || statusConfig.unknown;
|
|
|
|
return (
|
|
<span className={config.className}>
|
|
<span
|
|
className={`w-2 h-2 rounded-full ${config.dotColor} mr-1.5 ${
|
|
status === 'online' || status === 'running' ? 'animate-pulse-dot' : ''
|
|
}`}
|
|
/>
|
|
{config.label}
|
|
</span>
|
|
);
|
|
}
|