Indicateur d'etat visuel avec icone et texte colore. Utilise dans le timer et les rooms pour afficher l'etat courant d'une action (pret, en cours, reussi, echoue). Le status "countdown" pulse et "running" fait tourner l'icone.
Note : Le composant reel utilise useTranslations() pour les labels i18n. Le mockup ci-dessous reproduit le rendu visuel.
Utilisation typique dans une liste d'etats de timer ou de room multijoueur.
| Status | Icone | Couleur | Animation | Texte |
|---|---|---|---|---|
| ready | Zap | primary (bleu) | Aucune | Pret |
| countdown | Clock | orange-500 | Pulse | Preparation |
| running | Clock | green-500 | Spin | En cours |
| success | CheckCircle | green-600 | Aucune | Reussi |
| failed | XCircle | red-500 | Aucune | Echec |
| Prop | Type | Default | Description |
|---|---|---|---|
| status | "ready" | "countdown" | "running" | "success" | "failed" | — | L'etat a afficher. Determine l'icone, la couleur, l'animation et le texte. |
| className | string | — | Classes CSS additionnelles. Le composant est rendu en inline-flex avec padding arrondi (rounded-full). |