profile ProfileProgressBar.tsx

100% Statements 4/4

100% Branches 2/2

100% Functions 1/1

100% Lines 3/3

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  
 
 
 
 
 
 
 
 
3x
 
3x
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import type { Pro } from "../../lib/api";
import { getProfileCompleteness } from "../../lib/profile-completeness";
 
interface ProfileProgressBarProps {
  pro: Pro;
  projectCount: number;
}
 
export function ProfileProgressBar({ pro, projectCount }: ProfileProgressBarProps) {
  const { percentage } = getProfileCompleteness(pro, projectCount);
 
  if (percentage >= 100) return null;
 
  return (
    <div className="flex items-center gap-2">
      <div
        role="progressbar"
        aria-valuenow={percentage}
        aria-valuemin={0}
        aria-valuemax={100}
        className="w-24 h-2 bg-background-muted rounded-full overflow-hidden"
      >
        <div
          className="h-full bg-primary-500 transition-all duration-500 rounded-full"
          style={{ width: `${percentage}%` }}
        />
      </div>
      <span className="text-xs font-semibold text-foreground-muted">{percentage}%</span>
    </div>
  );
}