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 | 13x 24x 24x 2x 10x 12x 24x 24x 21x 1x 2x 24x | /**
* Composant Spinner - Indicateur de chargement
*
* Ce composant affiche un indicateur de chargement rotatif (spinner) personnalisable
* avec différentes tailles et couleurs. Il est utilisé pour indiquer aux utilisateurs
* qu'une opération est en cours.
*
* Fonctionnalités :
* - Tailles configurables (small, medium, large)
* - Couleurs configurables (blue, white, gray)
* - Classes CSS personnalisables
* - Accessible avec attributs ARIA
* - Animation CSS fluide
*
* Utilisation :
* <Spinner size="large" color="blue" />
* <Spinner size="small" color="white" className="mx-auto" />
*/
'use client';
/**
* Props pour le composant Spinner
*/
type Props = {
/** Taille du spinner */
size?: 'small' | 'medium' | 'large';
/** Couleur du spinner */
color?: 'blue' | 'white' | 'gray';
/** Classes CSS supplémentaires */
className?: string;
}
/**
* Composant Spinner - Indicateur de chargement rotatif
*
* @param props - Les propriétés du composant
* @returns JSX.Element - L'indicateur de chargement
*/
export default function Spinner({ size = 'medium', color = 'blue', className = '' }: Props) {
/**
* Détermine les classes CSS pour la taille du spinner
* @returns string - Classes CSS de taille
*/
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';
}
};
/**
* Détermine les classes CSS pour la couleur du spinner
* @returns string - Classes CSS de couleur
*/
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"
>
{/* Texte accessible pour les lecteurs d'écran */}
<span className="sr-only">Chargement...</span>
</div>
);
}
|