diff options
Diffstat (limited to 'frontend/components/ui/progress.tsx')
| -rw-r--r-- | frontend/components/ui/progress.tsx | 31 |
1 files changed, 31 insertions, 0 deletions
diff --git a/frontend/components/ui/progress.tsx b/frontend/components/ui/progress.tsx new file mode 100644 index 0000000..e7a416c --- /dev/null +++ b/frontend/components/ui/progress.tsx | |||
| @@ -0,0 +1,31 @@ | |||
| 1 | "use client" | ||
| 2 | |||
| 3 | import * as React from "react" | ||
| 4 | import * as ProgressPrimitive from "@radix-ui/react-progress" | ||
| 5 | |||
| 6 | import { cn } from "@/lib/utils" | ||
| 7 | |||
| 8 | function Progress({ | ||
| 9 | className, | ||
| 10 | value, | ||
| 11 | ...props | ||
| 12 | }: React.ComponentProps<typeof ProgressPrimitive.Root>) { | ||
| 13 | return ( | ||
| 14 | <ProgressPrimitive.Root | ||
| 15 | data-slot="progress" | ||
| 16 | className={cn( | ||
| 17 | "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", | ||
| 18 | className | ||
| 19 | )} | ||
| 20 | {...props} | ||
| 21 | > | ||
| 22 | <ProgressPrimitive.Indicator | ||
| 23 | data-slot="progress-indicator" | ||
| 24 | className="bg-primary h-full w-full flex-1 transition-all" | ||
| 25 | style={{ transform: `translateX(-${100 - (value || 0)}%)` }} | ||
| 26 | /> | ||
| 27 | </ProgressPrimitive.Root> | ||
| 28 | ) | ||
| 29 | } | ||
| 30 | |||
| 31 | export { Progress } | ||
