| 1 | import { Progress as Primitive } from "radix-ui"; |
| 2 | import type { ComponentProps } from "react"; |
| 3 | |
| 4 | import { cn } from "../../lib/cn"; |
| 5 | |
| 6 | // shadcn/ui's progress, styled with g1t's tokens: how far along something |
| 7 | // is, as a bar in `line` filled to `value` percent. The fill is the accent |
| 8 | // unless a `tone` class such as `bg-success` is passed in `indicatorClassName`. |
| 9 | |
| 10 | export function Progress({ className, indicatorClassName, value, ...props }: ComponentProps<typeof Primitive.Root> & { indicatorClassName?: string }) { |
| 11 | return ( |
| 12 | <Primitive.Root data-slot="progress" value={value} className={cn("relative block h-2 w-full overflow-hidden rounded-full bg-line", className)} {...props}> |
| 13 | <Primitive.Indicator |
| 14 | data-slot="progress-indicator" |
| 15 | className={cn("block h-full rounded-full bg-accent transition-[width]", indicatorClassName)} |
| 16 | style={{ width: `${Math.max(0, Math.min(100, value ?? 0))}%` }} |
| 17 | /> |
| 18 | </Primitive.Root> |
| 19 | ); |
| 20 | } |