47f325182a
Eliminate all remaining text-kodo-content-dim from user-facing source files. This legacy token (hardcoded Gray-400) is now fully replaced by the theme-aware text-muted-foreground token across UI primitives, settings, social features, playlists, modals, inventory, and admin views. Only story files (.stories.tsx) retain the old token for reference. Total migration: ~345 instances across 87 files (this + previous commit). Co-authored-by: Cursor <cursoragent@cursor.com>
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-48',
|
|
className,
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
'animate-spin rounded-full border-2 border-muted border-t-primary',
|
|
sizeClasses[size],
|
|
)}
|
|
role="status"
|
|
aria-label="Chargement en cours"
|
|
>
|
|
<span className="sr-only">Chargement...</span>
|
|
</div>
|
|
{text && (
|
|
<p className="mt-2 text-sm text-muted-foreground dark:text-muted-foreground">{text}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|