progress.tsx raw

   1  "use client";
   2  
   3  import * as React from "react";
   4  import { Progress as ProgressPrimitive } from "radix-ui";
   5  
   6  import { cn } from "src/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          "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
  18          className
  19        )}
  20        {...props}
  21      >
  22        <ProgressPrimitive.Indicator
  23          data-slot="progress-indicator"
  24          className="h-full w-full flex-1 bg-primary transition-all"
  25          style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
  26        />
  27      </ProgressPrimitive.Root>
  28    );
  29  }
  30  
  31  export { Progress };
  32