Function Stepper

src/showcase/components/stepper/DottedStepper.tsx:112–135

()

)

const Stepper: React.FC = () => {
  const [currentStep, setCurrentStep] = useState(1)

  const handleNext = () => {
    setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1))
  }

  const handlePrev = () => {
    setCurrentStep((prev) => Math.max(prev - 1, 0))
  }

  return (
    <div className="mx-auto w-full max-w-2xl p-6">
      <StepIndicator currentStep={currentStep} steps={steps} />
      <StepContent />
      <NavigationButtons
        currentStep={currentStep}
        totalSteps={steps.length}
        handlePrev={handlePrev}
        handleNext={handleNext}
      />
    </div>
  )
}

export default Stepper