Stepper with descriptions

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

const steps = [
  { title: "Account", description: "Create your account" },
  { title: "Profile", description: "Set up your profile" },
  { title: "Complete", description: "Review and finish" },
]
</script>

<template>
  <Stepper :default-value="2" class="w-full max-w-md space-y-8">
    <template #indicator-completed>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="size-3.5"
      >
        <path d="M20 6 9 17l-5-5" />
      </svg>
    </template>
    <template #indicator-loading>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="size-3.5 animate-spin"
      >
        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
      </svg>
    </template>

    <StepperNav>
      <StepperItem
        v-for="(step, index) in steps"
        :key="index"
        :step="index + 1"
        class="relative flex-1 items-start"
      >
        <StepperTrigger class="flex flex-col gap-2.5">
          <StepperIndicator>{{ index + 1 }}</StepperIndicator>
          <StepperTitle>{{ step.title }}</StepperTitle>
          <StepperDescription>{{ step.description }}</StepperDescription>
        </StepperTrigger>

        <StepperSeparator
          v-if="steps.length > index + 1"
          class="group-data-[state=completed]/step:bg-primary absolute inset-x-0 top-2.5 left-[calc(50%+0.875rem)] m-0 group-data-[orientation=horizontal]/stepper-nav:w-[calc(100%-2rem+0.225rem)] group-data-[orientation=horizontal]/stepper-nav:flex-none"
        />
      </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>