| 2 | import * as ProgressPrimitive from "@radix-ui/react-progress"; |
| 3 | import { cn } from "@/lib/utils"; |
| 4 | function Progress({ |
| 5 | className, |
| 6 | value, |
| 7 | ...props |
| 8 | }) { |
| 9 | return <ProgressPrimitive.Root |
| 10 | data-slot="progress" |
| 11 | className={cn( |
| 12 | "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", |
| 13 | className |
| 14 | )} |
| 15 | {...props} |
| 16 | > |
| 17 | <ProgressPrimitive.Indicator |
| 18 | data-slot="progress-indicator" |
| 19 | className="bg-primary h-full w-full flex-1 transition-all" |
| 20 | style={{ transform: `translateX(-${100 - (value || 0)}%)` }} |
| 21 | /> |
| 22 | </ProgressPrimitive.Root>; |
| 23 | } |
| 24 | export { Progress }; |