Stepper with progress bar and titles

<script setup lang="ts">
import { Stepper, StepperContent, StepperIndicator, StepperItem, StepperNav, StepperPanel, StepperTitle, StepperTrigger } from "@/components/reui/stepper"

const steps = [
  { title: "User Details" },
  { title: "Payment Info" },
  { title: "Auth OTP" },
  { title: "Preview Form" },
]
</script>

<template>
  <Stepper :default-value="2" class="w-full max-w-lg space-y-8">
    <StepperNav class="mb-10 gap-5">
      <StepperItem
        v-for="(step, index) in steps"
        :key="index"
        :step="index + 1"
        class="relative flex-1 items-start"
      >
        <StepperTrigger class="flex grow flex-col items-start justify-center gap-3.5">
          <StepperIndicator
            class="bg-border data-[state=active]:bg-primary data-[state=completed]:bg-primary h-1 w-full rounded-full"
          >
            <span class="sr-only">{{ index + 1 }}</span>
          </StepperIndicator>
          <StepperTitle
            class="group-data-[state=inactive]/step:text-muted-foreground text-start font-semibold"
          >{{ step.title }}</StepperTitle>
        </StepperTrigger>
      </StepperItem>
    </StepperNav>

    <StepperPanel class="text-sm">
      <StepperContent
        v-for="(step, index) in steps"
        :key="index"
        :value="index + 1"
        class="flex items-center justify-center"
      >{{ step.title }} content</StepperContent>
    </StepperPanel>
  </Stepper>
</template>