Progress

1"use client"
2
3import * as ProgressPrimitive from "@radix-ui/react-progress"
4
5import * as React from "react"
6
7import { cn } from "@/lib/utils"
8
9function Progress({
10  className,
11  value,
12  ...props
13}: React.ComponentProps<typeof ProgressPrimitive.Root> & {
14  value?: number
15}) {
16  return (
17    <ProgressPrimitive.Root
18      data-slot="progress"
19      className={cn(
20        "relative h-4 w-full overflow-hidden rounded-base border-2 border-border bg-secondary-background",
21        className,
22      )}
23      {...props}
24    >
25      <ProgressPrimitive.Indicator
26        data-slot="progress-indicator"
27        className="h-full w-full flex-1 border-r-2 border-border bg-main transition-all"
28        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
29      />
30    </ProgressPrimitive.Root>
31  )
32}
33
34export { Progress }