nuzlocke-tracker/frontend/src/components/StepIndicator.tsx

const DEFAULT_STEPS = ['Select Game', 'Configure Rules', 'Create Run']

interface StepIndicatorProps {
  currentStep: number
  onStepClick: (step: number) => void
  steps?: string[]
}

export function StepIndicator({
  currentStep,
  onStepClick,
  steps = DEFAULT_STEPS,
}: StepIndicatorProps) {
  return (
    <nav aria-label="Progress" className="mb-8">
      <ol className="flex items-center">
        {steps.map((label, i) => {
          const step = i + 1
          const isCompleted = step < currentStep
          const isCurrent = step === currentStep

          return (
            <li key={label} className={`flex items-center ${i < steps.length - 1 ? 'flex-1' : ''}`}>
              <button
                type="button"
                onClick={() => isCompleted && onStepClick(step)}
                disabled={!isCompleted}
                className={`flex items-center gap-2 text-sm font-medium ${
                  isCompleted
                    ? 'text-text-link cursor-pointer hover:text-accent-300'
                    : isCurrent
                      ? 'text-text-primary'
                      : 'text-text-muted cursor-default'
                }`}
              >
                <span
                  className={`flex items-center justify-center w-8 h-8 rounded-full text-sm font-bold shrink-0 ${
                    isCompleted
                      ? 'bg-blue-600 text-white'
                      : isCurrent
                        ? 'border-2 border-accent-400 text-accent-400'
                        : 'border-2 border-border-default text-text-muted'
                  }`}
                >
                  {isCompleted ? (
                    <svg
                      className="w-4 h-4"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      strokeWidth={3}
                    >
                      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                    </svg>
                  ) : (
                    step
                  )}
                </span>
                <span className="hidden sm:inline">{label}</span>
              </button>
              {i < steps.length - 1 && (
                <div
                  className={`flex-1 h-0.5 mx-3 ${
                    step < currentStep ? 'bg-blue-600' : 'bg-surface-3'
                  }`}
                />
              )}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}