creacion de componentes dinamicos

src/components/ui/Spinner.tsx

@@ -0,0 +1,44 @@
+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>
+  );
+};