File size: 680 Bytes
1187856
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
interface Phase {
  label: string;
  value: number;
}

export function PhaseMonitor({
  sectionNumber,
  title,
  description,
  phases,
}: {
  sectionNumber: string;
  title: string;
  description: string;
  phases: Phase[];
}) {
  return (
    <section id="phase-monitor" className="section phase-monitor">
      <div className="section-head">
        <span>{sectionNumber}</span>
        <h2>{title}</h2>
      </div>
      <p>{description}</p>
      <div className="phase-bars">
        {phases.map((p) => (
          <span key={p.label} style={{ "--p": p.value } as React.CSSProperties}>
            {p.label}
          </span>
        ))}
      </div>
    </section>
  );
}