calendar/packages/ui/components/form/step/FormStep.tsx

import React from "react";

import classNames from "@calcom/lib/classNames";

type Props = {
  steps: number;
  currentStep: number;
};

// It might be worth passing this label string from outside the component so we can translate it?
function FormStep({ currentStep, steps }: Props) {
  return (
    <div className="w-full">
      <p className="text-xs font-medium text-gray-400">
        Step {currentStep} of {steps}
      </p>
      <div className="flex flex-nowrap space-x-1">
        {[...Array(steps)].map((_, j) => {
          console.log({ j, currentStep });
          return (
            <div
              className={classNames(
                "h-1 w-full rounded-sm",
                currentStep - 1 >= j ? "bg-black" : "bg-gray-400"
              )}
              key={j}
            />
          );
        })}
      </div>
    </div>
  );
}

export default FormStep;