45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
|
|
export interface SpinnerProps {
|
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
color?: 'cyan' | 'blue' | 'white' | 'slate' | 'current';
|
|
className?: string;
|
|
label?: string;
|
|
}
|
|
|
|
const sizeClasses = {
|
|
xs: 'w-3.5 h-3.5 border-2',
|
|
sm: 'w-4 h-4 border-2',
|
|
md: 'w-6 h-6 border-2',
|
|
lg: 'w-8 h-8 border-3',
|
|
xl: 'w-12 h-12 border-4',
|
|
};
|
|
|
|
const colorClasses = {
|
|
cyan: 'border-cyan-500/20 border-t-cyan-500 dark:border-cyan-400/20 dark:border-t-cyan-400',
|
|
blue: 'border-blue-500/20 border-t-blue-500 dark:border-blue-400/20 dark:border-t-blue-400',
|
|
white: 'border-white/30 border-t-white',
|
|
slate: 'border-slate-300 border-t-slate-700 dark:border-slate-700 dark:border-t-slate-200',
|
|
current: 'border-current/20 border-t-current',
|
|
};
|
|
|
|
export const Spinner: React.FC<SpinnerProps> = ({
|
|
size = 'md',
|
|
color = 'cyan',
|
|
className = '',
|
|
label = 'Cargando...',
|
|
}) => {
|
|
return (
|
|
<div
|
|
role="status"
|
|
aria-label={label}
|
|
className={`inline-flex items-center justify-center ${className}`}
|
|
>
|
|
<div
|
|
className={`rounded-full animate-spin ${sizeClasses[size]} ${colorClasses[color]}`}
|
|
/>
|
|
<span className="sr-only">{label}</span>
|
|
</div>
|
|
);
|
|
};
|