Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | 2x 3x 3x 2x 1x 3x 3x 1x 2x 3x | /**
* @module components/common/Spinner
* Module de composant Spinner pour l'affichage des indicateurs de chargement
*
* Ce module contient le composant Spinner qui affiche un indicateur de chargement rotatif
* personnalisable. Il est utilisé dans toute l'application pour indiquer les états de
* chargement lors des appels API ou des opérations asynchrones.
*
* ## Fonctionnalités principales
* - Indicateur de chargement rotatif avec animation CSS
* - Personnalisation de la taille (small, medium, large)
* - Personnalisation de la couleur (blue, white, gray)
* - Classes CSS additionnelles via className
* - Accessibilité avec attributs ARIA appropriés
*
* ## Variantes disponibles
* ### Tailles
* - **small** : 16x16px (w-4 h-4)
* - **medium** : 24x24px (w-6 h-6) - par défaut
* - **large** : 32x32px (w-8 h-8)
*
* ### Couleurs
* - **blue** : couleur principale de l'application - par défaut
* - **white** : pour les fonds sombres
* - **gray** : couleur neutre
*
* ## Utilisation courante
* - Chargement de données depuis l'API
* - États de transition dans les modals
* - Indicateurs de soumission de formulaires
*
* @module components/common/Spinner
* @group Components
*/
'use client';
/**
* Props du composant Spinner
*/
export type SpinnerProps = {
size?: 'small' | 'medium' | 'large';
color?: 'blue' | 'white' | 'gray';
className?: string;
}
/**
* Composant Spinner pour afficher un indicateur de chargement.
* Voir la documentation du module ci-dessus pour les détails complets.
*
* @param props - Les propriétés du composant
* @returns Indicateur de chargement rotatif personnalisable
*/
export default function Spinner({ size = 'medium', color = 'blue', className = '' }: SpinnerProps) {
const getSizeClasses = () => {
switch (size) {
case 'small':
return 'w-4 h-4';
case 'medium':
return 'w-6 h-6';
case 'large':
return 'w-8 h-8';
default:
return 'w-6 h-6';
}
};
const getColorClasses = () => {
switch (color) {
case 'blue':
return 'border-blue-600 border-t-transparent';
case 'white':
return 'border-white border-t-transparent';
case 'gray':
return 'border-gray-600 border-t-transparent';
default:
return 'border-blue-600 border-t-transparent';
}
};
return (
<div
className={`${getSizeClasses()} border-2 border-solid ${getColorClasses()} rounded-full animate-spin ${className}`}
role="status"
aria-label="Chargement en cours"
>
<span className="sr-only">Chargement...</span>
</div>
);
}
|