puffpastry-frontend/src/components/wizard/WizardStepper.vue

<template>
  <ol class="flex flex-wrap items-center gap-y-2">
    <li
        v-for="(step, index) in steps"
        :key="step.id"
        class="flex items-center"
    >
      <button
          type="button"
          class="flex items-center gap-2 rounded-lg px-1.5 py-1 transition"
          :class="stepClasses(index)"
          :disabled="index > maxVisited"
          @click="emit('goTo', index)"
      >
        <span
            class="flex h-6 w-6 items-center justify-center rounded-full text-xs font-semibold"
            :class="badgeClasses(index)"
        >
          {{ index + 1 }}
        </span>
        <span class="hidden text-sm font-medium sm:inline">{{ step.label }}</span>
      </button>

      <span v-if="index < steps.length - 1" class="mx-1 h-px w-4 bg-slate-300 sm:w-6" aria-hidden="true" />
    </li>
  </ol>
</template>

<script setup lang="ts">
import type { WizardStep } from "../../composables/useProposalWizard";

const props = defineProps<{
  steps: WizardStep[];
  current: number;
  maxVisited: number;
}>();

const emit = defineEmits<{
  goTo: [index: number];
}>();

const stepClasses = (index: number) => {
  if (index === props.current) return "text-slate-900";
  if (index <= props.maxVisited) return "text-slate-600 hover:bg-slate-100 cursor-pointer";
  return "text-slate-400 cursor-not-allowed";
};

const badgeClasses = (index: number) => {
  if (index === props.current) return "bg-amber-500 text-white";
  if (index < props.current) return "bg-slate-700 text-white";
  return "bg-slate-200 text-slate-500";
};
</script>