Stepper with segmented progress bar

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

const steps = [1, 2, 3, 4]

const currentStep = ref(1)
</script>

<template>
  <div class="w-full max-w-md">
    <Stepper v-model:value="currentStep">
      <StepperNav>
        <StepperItem
          v-for="step in steps"
          :key="step"
          :step="step"
          class="first:rounded-s-full last:rounded-e-full flex-1 overflow-hidden transition-all duration-300"
        >
          <StepperTrigger class="w-full flex-col items-start gap-2" as-child>
            <StepperIndicator class="bg-border h-2 w-full rounded-none!">
              <span class="sr-only">{{ step }}</span>
            </StepperIndicator>
          </StepperTrigger>
        </StepperItem>
      </StepperNav>

      <div class="flex items-center justify-between gap-2.5 py-1">
        <Button
          variant="link"
          :class="['px-0', currentStep === 1 && 'pointer-events-none opacity-0']"
          @click="currentStep = currentStep - 1"
        >
          <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-4"
          >
            <path d="m12 19-7-7 7-7" />
            <path d="M19 12H5" />
          </svg>Back</Button>

        <div class="text-sm font-medium">
          <span class="text-foreground">{{ currentStep }}</span> <span class="text-muted-foreground/60">/ {{ steps.length }}</span>
        </div>
      </div>

      <StepperPanel class="py-6 text-sm">
        <StepperContent
          v-for="step in steps"
          :key="step"
          class="flex w-full items-center justify-center"
          :value="step"
        >Step {{ step }} content</StepperContent>
      </StepperPanel>

      <div class="flex items-center justify-end gap-2.5">
        <Button
          variant="outline"
          :disabled="currentStep === steps.length"
          @click="currentStep = currentStep + 1"
        >Next</Button>
      </div>
    </Stepper>
  </div>
</template>