36 lines
864 B
TypeScript
36 lines
864 B
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
value?: number
|
|
max?: number
|
|
className?: string
|
|
}
|
|
|
|
const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
|
|
({ className, value = 0, max = 100, ...props }, ref) => {
|
|
const percentage = Math.min(Math.max((value / max) * 100, 0), 100)
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn("relative h-2 w-full overflow-hidden rounded-full bg-gray-200", className)}
|
|
{...props}
|
|
>
|
|
<div
|
|
className="h-full w-full flex-1 bg-blue-500 transition-all duration-300 ease-in-out"
|
|
style={{
|
|
transform: `translateX(-${100 - percentage}%)`,
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
},
|
|
)
|
|
|
|
Progress.displayName = "Progress"
|
|
|
|
export { Progress }
|