advent22/ui/src/components/bulma/Breadcrumbs.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <nav class="breadcrumb has-succeeds-separator">
    <ul>
      <li
        v-for="(step, index) in steps"
        :key="index"
        :class="model === index ? 'is-active' : ''"
        @click.left="model = index"
      >
        <a :class="model === index ? 'has-text-primary' : ''">
          <span class="icon is-small">
            <FontAwesomeIcon :icon="step.icon" />
          </span>
          <span>{{ step.label }}</span>
        </a>
      </li>
    </ul>
  </nav>
</template>

<script setup lang="ts">
export interface BCStep {
  label: string;
  icon: string | string[];
}

const model = defineModel<number>({ required: true });

defineProps<{
  steps: BCStep[];
}>();
</script>