ProgressBar.tsx

import React from "react";

interface Props {
  index: number;
  steps: Array<{ id: number; title: string }>;
}

export default function ({ index, steps = [] }: Props) {
  return (
    <ul className="progressBar">
      {steps.map(({ id, title }) => (
        <li className={`${index === id || index > id ? "active" : ""}`}>
          {title}
        </li>
      ))}
    </ul>
  );
}