75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import { cn } from '@/lib/utils'
|
|
|
|
interface CircularProgressProps {
|
|
current: number
|
|
total: number
|
|
className?: string
|
|
}
|
|
|
|
export function CircularProgress({
|
|
current,
|
|
total,
|
|
className,
|
|
}: CircularProgressProps) {
|
|
// Configuración interna del SVG (Coordenadas 100x100)
|
|
const center = 50
|
|
const strokeWidth = 8 // Grosor de la línea
|
|
const radius = 40 // Radio (dejamos margen para el borde)
|
|
const circumference = 2 * Math.PI * radius
|
|
|
|
// Cálculo del porcentaje inverso (para que se llene correctamente)
|
|
const percentage = (current / total) * 100
|
|
const strokeDashoffset = circumference - (percentage / 100) * circumference
|
|
|
|
return (
|
|
// CAMBIO CLAVE 1: 'size-24' (96px) da mucho más aire que 'size-16'
|
|
<div
|
|
className={cn(
|
|
'relative flex size-20 items-center justify-center',
|
|
className,
|
|
)}
|
|
>
|
|
{/* CAMBIO CLAVE 2: Contenedor de texto con inset-0 para centrado perfecto */}
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center">
|
|
<span className="mb-1 text-sm leading-none font-medium text-slate-500">
|
|
Paso
|
|
</span>
|
|
<span className="text-base leading-none font-bold text-slate-900">
|
|
{current}{' '}
|
|
<span className="text-base font-normal text-slate-400">
|
|
/ {total}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
{/* SVG con viewBox para escalar automáticamente */}
|
|
<svg className="size-full -rotate-90" viewBox="0 0 100 100">
|
|
{/* Círculo de Fondo (Gris claro) */}
|
|
<circle
|
|
cx={center}
|
|
cy={center}
|
|
r={radius}
|
|
stroke="currentColor"
|
|
strokeWidth={strokeWidth}
|
|
fill="transparent"
|
|
className="text-slate-100"
|
|
/>
|
|
{/* Círculo de Progreso (Verde/Color principal) */}
|
|
<circle
|
|
cx={center}
|
|
cy={center}
|
|
r={radius}
|
|
stroke="currentColor"
|
|
strokeWidth={strokeWidth}
|
|
fill="transparent"
|
|
strokeDasharray={circumference}
|
|
strokeDashoffset={strokeDashoffset}
|
|
strokeLinecap="round"
|
|
className="text-primary transition-all duration-500 ease-out"
|
|
// Nota: usa text-primary para tomar el color de tu tema, o pon text-green-500
|
|
/>
|
|
</svg>
|
|
</div>
|
|
)
|
|
}
|