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

import { useAutoAnimate } from "@formkit/auto-animate/react";
import Link from "next/link";

type DefaultStep = {
  title: string;
};

function Stepper<T extends DefaultStep>(props: {
  href: string;
  step: number;
  steps: T[];
  disableSteps?: boolean;
  stepLabel?: (currentStep: number, totalSteps: number) => string;
}) {
  const {
    href,
    steps,
    stepLabel = (currentStep, totalSteps) => `Step ${currentStep} of ${totalSteps}`,
  } = props;
  const [stepperRef] = useAutoAnimate<HTMLOListElement>();
  return (
    <>
      {steps.length > 1 && (
        <nav className="flex items-center justify-center" aria-label="Progress">
          <p className="text-sm font-medium">{stepLabel(props.step, steps.length)}</p>
          <ol role="list" className="ml-8 flex items-center space-x-5" ref={stepperRef}>
            {steps.map((mapStep, index) => (
              <li key={mapStep.title}>
                <Link
                  href={props.disableSteps ? "#" : `${href}?step=${index + 1}`}
                  shallow
                  replace
                  legacyBehavior>
                  {index + 1 < props.step ? (
                    <a className="block h-2.5 w-2.5 rounded-full bg-gray-600 hover:bg-gray-900">
                      <span className="sr-only">{mapStep.title}</span>
                    </a>
                  ) : index + 1 === props.step ? (
                    <a className="relative flex items-center justify-center" aria-current="step">
                      <span className="absolute flex h-5 w-5 p-px" aria-hidden="true">
                        <span className="h-full w-full rounded-full bg-gray-200" />
                      </span>
                      <span
                        className="relative block h-2.5 w-2.5 rounded-full bg-gray-600"
                        aria-hidden="true"
                      />
                      <span className="sr-only">{mapStep.title}</span>
                    </a>
                  ) : (
                    <a className="block h-2.5 w-2.5 rounded-full bg-gray-200 hover:bg-gray-400">
                      <span className="sr-only">{mapStep.title}</span>
                    </a>
                  )}
                </Link>
              </li>
            ))}
          </ol>
        </nav>
      )}
    </>
  );
}

export default Stepper;