components progress-bar.tsx

100% Statements 2/2

100% Branches 4/4

100% Functions 1/1

100% Lines 2/2

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  
 
 
 
 
 
 
 
 
10x
 
 
 
 
 
10x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Progress } from "@/components/ui/progress";
 
interface ProgressBarProps {
  value: number;
  showLabel?: boolean;
  size?: "sm" | "md" | "lg";
}
 
export function ProgressBar({ value, showLabel = true, size = "md" }: ProgressBarProps) {
  const height = {
    sm: "h-1.5",
    md: "h-2",
    lg: "h-3",
  }[size];
 
  return (
    <div className="flex items-center gap-3 w-full">
      <Progress 
        value={value} 
        className={`flex-1 ${height}`}
        data-testid="progress-bar"
      />
      {showLabel && (
        <span 
          className="text-sm font-semibold text-muted-foreground min-w-[3rem] text-right"
          data-testid="text-progress-value"
        >
          {value}%
        </span>
      )}
    </div>
  );
}