92 lines
1.9 KiB
TypeScript
92 lines
1.9 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
|
|
/**
|
|
* LoadingSpinnerProps - Propriétés du composant LoadingSpinner
|
|
*
|
|
* @interface LoadingSpinnerProps
|
|
*/
|
|
interface LoadingSpinnerProps {
|
|
/**
|
|
* Taille du spinner
|
|
*
|
|
* - `sm`: Petit (h-4 w-4)
|
|
* - `md`: Moyen (h-8 w-8) - par défaut
|
|
* - `lg`: Grand (h-12 w-12)
|
|
*
|
|
* @default 'md'
|
|
*/
|
|
size?: 'sm' | 'md' | 'lg';
|
|
|
|
/**
|
|
* Classes CSS personnalisées
|
|
*/
|
|
className?: string;
|
|
|
|
/**
|
|
* Texte à afficher sous le spinner
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <LoadingSpinner text="Chargement en cours..." />
|
|
* ```
|
|
*/
|
|
text?: string;
|
|
}
|
|
|
|
/**
|
|
* LoadingSpinner - Composant de spinner de chargement
|
|
*
|
|
* Composant de spinner animé pour indiquer un état de chargement.
|
|
* Inclut un texte optionnel et supporte plusieurs tailles.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* // Spinner simple
|
|
* <LoadingSpinner />
|
|
*
|
|
* // Spinner avec texte
|
|
* <LoadingSpinner text="Chargement..." />
|
|
*
|
|
* // Spinner de grande taille
|
|
* <LoadingSpinner size="lg" text="Traitement en cours" />
|
|
* ```
|
|
*
|
|
* @component
|
|
* @param {LoadingSpinnerProps} props - Propriétés du composant
|
|
* @returns {JSX.Element} Spinner animé avec texte optionnel
|
|
*/
|
|
|
|
export function LoadingSpinner({
|
|
size = 'md',
|
|
className,
|
|
text,
|
|
}: LoadingSpinnerProps) {
|
|
const sizeClasses = {
|
|
sm: 'h-4 w-4',
|
|
md: 'h-8 w-8',
|
|
lg: 'h-12 w-12',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex flex-col items-center justify-center min-h-[200px]',
|
|
className,
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
'animate-spin rounded-full border-2 border-gray-300 border-t-blue-600',
|
|
sizeClasses[size],
|
|
)}
|
|
role="status"
|
|
aria-label="Chargement en cours"
|
|
>
|
|
<span className="sr-only">Chargement...</span>
|
|
</div>
|
|
{text && (
|
|
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400">{text}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|