Function ProgressCircles

src/components/graph/tutorial/TutorialDialog.tsx:60–89

({
  currentStep,
  totalSteps,
  setCurrentStep,
})

}

const ProgressCircles: FC<ProgressCirclesProps> = ({
  currentStep,
  totalSteps,
  setCurrentStep,
}) => {
  // Number of circles to show at a time
  const maxVisibleCircles = 8;

  // Start index of the circles to show
  const start = Math.max(0, currentStep - Math.floor(maxVisibleCircles / 2));

  return (
    <div className="flex flex-row items-center justify-center gap-x-2">
      {Array.from(Array(maxVisibleCircles).keys()).map((index) => {
        const step = start + index;
        // TODO: Add slide transition to the progress circles, like a carousel
        return (
          step < totalSteps && (
            <ProgressCircle
              key={step}
              isCompleted={step < currentStep}
              isCurrent={step === currentStep}
              onClick={() => setCurrentStep(step)}
            />
          )
        );
      })}
    </div>
  );
};

const TutorialDialog: FC<TutorialProps> = ({
  show: isTutorialOpen,