Function StepIndicator

src/showcase/components/stepper/CheckedStepper.tsx:38–62

({
  currentStep,
  steps,
})

]

const StepIndicator: React.FC<{ currentStep: number; steps: StepProps[] }> = ({
  currentStep,
  steps,
}) => (
  <div className="flex justify-between">
    {steps.map((step, index) => (
      <div key={step.label} className="flex flex-col items-center">
        <motion.div
          className={`flex h-10 w-10 items-center justify-center rounded-full ${
            index <= currentStep ? 'bg-red-500/15 text-red-500' : 'bg-secondary'
          }`}
          initial={false}
          animate={{ scale: index === currentStep ? 1.2 : 1 }}
        >
          {index <= currentStep ? (
            <CheckCircle size={20} />
          ) : (
            <Circle size={20} />
          )}
        </motion.div>
        <div className="mt-2 text-sm">{step.label}</div>
      </div>
    ))}
  </div>
)

const ProgressBar: React.FC<{ currentStep: number; totalSteps: number }> = ({
  currentStep,