41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import * as React from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
value?: number
|
|
max?: number
|
|
showLabel?: boolean
|
|
}
|
|
|
|
const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
|
|
({ className, value = 0, max = 100, showLabel = false, ...props }, ref) => {
|
|
const percentage = Math.min(100, Math.max(0, (value / max) * 100))
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
'relative h-2 w-full overflow-hidden rounded-full bg-secondary',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<div
|
|
className="h-full bg-primary transition-all duration-300 ease-in-out"
|
|
style={{ width: `${percentage}%` }}
|
|
/>
|
|
</div>
|
|
{showLabel && (
|
|
<span className="text-xs text-muted-foreground mt-1 block text-right">
|
|
{Math.round(percentage)}%
|
|
</span>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
Progress.displayName = 'Progress'
|
|
|
|
export { Progress }
|