Le statut de l'événement
Classes CSS TailwindCSS pour le styling du statut
// Styling d'un badge de statut
const colorClasses = getStatusColor('en cours');
console.log(colorClasses); // 'bg-green-100 text-green-800 border-green-200'
// Badge de statut complet
function StatusBadge({ status }: { status: ExtendEvenement['status'] }) {
return (
<span className={`
inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border
${getStatusColor(status)}
`}>
{status}
</span>
);
}
// Indicateur de statut avec icône
function StatusIndicator({ event }: { event: ExtendEvenement }) {
const status = getEventStatus(event.date, event.horraire);
const colorClass = getStatusColor(status);
return (
<div className={`flex items-center gap-2 p-2 rounded ${colorClass}`}>
<StatusIcon status={status} />
<span className="capitalize">{status}</span>
</div>
);
}
Retourne les classes CSS appropriées pour l'affichage d'un statut d'événement
Cette fonction fournit un styling cohérent pour l'affichage des statuts d'événements dans toute l'application AdminJO. Elle utilise la palette de couleurs TailwindCSS pour assurer une harmonie visuelle.
Palette de couleurs
Classes retournées
Chaque statut retourne un ensemble de classes TailwindCSS :
Utilisation recommandée