# All files / src/components/ui progress.tsx

0% Statements 0/35
0% Branches 0/1
0% Functions 0/1
0% Lines 0/35

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36

     import { ComponentProps, forwardRef } from "react"
    import { cn } from "@/lib/utils"

    interface ProgressProps extends ComponentProps<"div"> {
      value?: number
    }

    export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
      ({ className, value = 0, ...props }, ref) => (
        <div
          ref={ref}
          className={cn("mat-mdc-progress-bar", "mdc-linear-progress", className)}
          role="progressbar"
          aria-valuemin={0}
          aria-valuemax={100}
          aria-valuenow={value}
          {...props}
        >
          <div className="mdc-linear-progress__buffer">
            <div className="mdc-linear-progress__buffer-bar" />
            <div className="mdc-linear-progress__buffer-dots" />
          </div>
          <div
            className="mdc-linear-progress__bar mdc-linear-progress__primary-bar"
            style={{ transform: `scaleX(${value / 100})` }}
          >
            <span className="mdc-linear-progress__bar-inner" />
          </div>
          <div className="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
            <span className="mdc-linear-progress__bar-inner" />
          </div>
        </div>
      )
    )
    Progress.displayName = "Progress"