egutierrez
97a3c84625
Reescribe todos los componentes UI para usar Mantine v9 en lugar de shadcn/Tailwind. Elimina cn(), CVA, components.json, theme_provider custom y globals.css con Tailwind. Añade 25+ componentes nuevos (AppShell, AuthForm, DatePickerInput, Dropzone, etc.) y MantineProvider como wrapper estándar del sistema de temas. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
import { Progress, Box } from "@mantine/core"
|
|
|
|
export interface ProgressBarProps {
|
|
value: number
|
|
max?: number
|
|
buffer?: number
|
|
showValue?: boolean
|
|
animated?: boolean
|
|
indeterminate?: boolean
|
|
label?: string
|
|
size?: "sm" | "md" | "lg"
|
|
color?: "primary" | "success" | "warning" | "destructive"
|
|
className?: string
|
|
}
|
|
|
|
const colorMap: Record<NonNullable<ProgressBarProps["color"]>, string> = {
|
|
primary: "blue",
|
|
success: "green",
|
|
warning: "yellow",
|
|
destructive: "red",
|
|
}
|
|
|
|
const sizeMap: Record<NonNullable<ProgressBarProps["size"]>, number> = {
|
|
sm: 4,
|
|
md: 8,
|
|
lg: 12,
|
|
}
|
|
|
|
export function ProgressBar({
|
|
value,
|
|
max = 100,
|
|
buffer,
|
|
showValue = false,
|
|
animated = false,
|
|
indeterminate = false,
|
|
size = "md",
|
|
color = "primary",
|
|
label,
|
|
className,
|
|
}: ProgressBarProps) {
|
|
const percentage = Math.min(100, Math.max(0, (value / max) * 100))
|
|
const bufferPercentage = buffer ? Math.min(100, Math.max(0, (buffer / max) * 100)) : undefined
|
|
const mantineColor = colorMap[color]
|
|
const mantineSize = sizeMap[size]
|
|
|
|
if (bufferPercentage !== undefined) {
|
|
return (
|
|
<Box data-slot="progress-bar" pos="relative" className={className}>
|
|
<Progress.Root size={mantineSize} aria-label={label}>
|
|
<Progress.Section value={bufferPercentage} color={mantineColor} style={{ opacity: 0.3 }} />
|
|
</Progress.Root>
|
|
<Box pos="absolute" top={0} left={0} right={0}>
|
|
<Progress.Root size={mantineSize} bg="transparent" aria-label={label}>
|
|
<Progress.Section
|
|
value={indeterminate ? 100 : percentage}
|
|
color={mantineColor}
|
|
animated={animated || indeterminate}
|
|
>
|
|
{showValue && !indeterminate && (
|
|
<Progress.Label>{Math.round(percentage)}%</Progress.Label>
|
|
)}
|
|
</Progress.Section>
|
|
</Progress.Root>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Progress.Root
|
|
data-slot="progress-bar"
|
|
size={mantineSize}
|
|
aria-label={label}
|
|
className={className}
|
|
>
|
|
<Progress.Section
|
|
value={indeterminate ? 100 : percentage}
|
|
color={mantineColor}
|
|
animated={animated || indeterminate}
|
|
>
|
|
{showValue && !indeterminate && (
|
|
<Progress.Label>{Math.round(percentage)}%</Progress.Label>
|
|
)}
|
|
</Progress.Section>
|
|
</Progress.Root>
|
|
)
|
|
}
|