|
1
|
import React from "react"; |
|
2
|
import { cn } from "@/lib/utils"; |
|
3
|
|
|
4
|
export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> { |
|
5
|
value?: number; |
|
6
|
max?: number; |
|
7
|
} |
|
8
|
|
|
9
|
const Progress = React.forwardRef<HTMLDivElement, ProgressProps>( |
|
10
|
({ className, value = 0, max = 100, ...props }, ref) => ( |
|
11
|
<div |
|
12
|
ref={ref} |
|
13
|
className={cn( |
|
14
|
"relative h-4 w-full overflow-hidden rounded-full bg-secondary", |
|
15
|
className |
|
16
|
)} |
|
17
|
{...props} |
|
18
|
> |
|
19
|
<div |
|
20
|
className="h-full w-full flex-1 bg-primary transition-all" |
|
21
|
style={{ transform: `translateX(-${100 - (value / max) * 100}%)` }} |
|
22
|
/> |
|
23
|
</div> |
|
24
|
) |
|
25
|
); |
|
26
|
Progress.displayName = "Progress"; |
|
27
|
|
|
28
|
export { Progress }; |