Function ProgressCircle

src/components/graph/tutorial/TutorialDialog.tsx:29–52

({
  isCompleted,
  isCurrent,
  onClick,
})

}

const ProgressCircle: FC<ProgressCircleProps> = ({
  isCompleted,
  isCurrent,
  onClick,
}) => {
  return (
    <div
      className="flex h-4 w-4 cursor-pointer flex-row items-center justify-center align-middle"
      onClick={onClick}
    >
      {isCurrent && (
        <div className="absolute h-4 w-4 rounded-full bg-blue-200" />
      )}
      {
        <div
          className={clsx(
            "absolute h-2 w-2 rounded-full",
            isCompleted || isCurrent ? "bg-blue-500" : "bg-gray-200",
          )}
        />
      }
    </div>
  );
};

interface ProgressCirclesProps {
  currentStep: number;