29 lines
1.3 KiB
Vue
29 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
const STEPS = ['Admin account', 'Instance', 'Provider'];
|
|
|
|
defineProps<{
|
|
// 1 based, the steps before it show as done
|
|
current: number;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<ol class="flex items-center gap-2 text-sm">
|
|
<template v-for="(step, index) in STEPS" :key="step">
|
|
<li v-if="index > 0" aria-hidden="true" class="flex-1 h-px bg-[var(--color-border)] [list-style-type:none]">
|
|
</li>
|
|
<li class="flex items-center gap-2 whitespace-nowrap [list-style-type:none]"
|
|
:aria-current="index + 1 === current ? 'step' : undefined"
|
|
:class="index + 1 === current ? 'font-medium text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'">
|
|
<span class="flex items-center justify-center w-6 h-6 rounded-md text-xs" :class="index + 1 <= current
|
|
? 'bg-[var(--color-accent)] text-[var(--color-accent-text)] font-semibold'
|
|
: 'border border-[var(--color-border-active)]'">
|
|
<span v-if="index + 1 < current" class="i-mynaui-check text-3.5" aria-label="Done"></span>
|
|
<template v-else>{{ index + 1 }}</template>
|
|
</span>
|
|
{{ step }}
|
|
</li>
|
|
</template>
|
|
</ol>
|
|
</template>
|