refactor(ui): migrar componente Spinner a HeroUI

This commit is contained in:
Miguel Ortega committed 2026-09-14 20:44:00 -05:00
1 parent b56fe10cbe
commit 2b53dd0a11
1 file changed
+21 -25
+21 -25
View File
@@ -1,45 +1,41 @@
"use client";
import React from 'react';
import React from "react";
import { Spinner as HeroSpinner } from "@heroui/react";
export interface SpinnerProps {
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
color?: 'cyan' | 'blue' | 'white' | 'slate' | 'current';
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',
xs: "w-3.5 h-3.5",
sm: "w-4 h-4",
md: "w-6 h-6",
lg: "w-8 h-8",
xl: "w-12 h-12",
};
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',
cyan: "text-cyan-500 dark:text-cyan-400",
blue: "text-blue-500 dark:text-blue-400",
white: "text-white",
slate: "text-slate-700 dark:text-slate-200",
current: "text-current",
};
export const Spinner: React.FC<SpinnerProps> = ({
size = 'md',
color = 'cyan',
className = '',
label = 'Cargando...',
size = "md",
color = "cyan",
className = "",
label = "Cargando...",
}) => {
return (
<div
role="status"
<HeroSpinner
aria-label={label}
className={`inline-flex items-center justify-center ${className}`}
>
<div
className={`rounded-full animate-spin ${sizeClasses[size]} ${colorClasses[color]}`}
className={`inline-block animate-spin ${sizeClasses[size]} ${colorClasses[color]} ${className}`}
/>
<span className="sr-only">{label}</span>
</div>
);
};