22 lines
656 B
Vue
22 lines
656 B
Vue
<script setup lang="ts">
|
|
defineProps<{ steps: string[]; active: number }>();
|
|
</script>
|
|
|
|
<template>
|
|
<ol class="border-border bg-bg mb-5 flex list-none border py-3.5">
|
|
<li
|
|
v-for="(s, i) in steps"
|
|
:key="s"
|
|
class="text-muted/70 flex-1 text-center text-[13px]"
|
|
:class="i === active ? 'text-primary font-semibold' : ''"
|
|
>
|
|
<span
|
|
class="mr-2 inline-block h-[22px] w-[22px] rounded-full text-center text-[12px] leading-[22px] text-white"
|
|
:class="i < active ? 'bg-success' : i === active ? 'bg-primary' : 'bg-[#ddd]'"
|
|
>{{ i + 1 }}</span
|
|
>
|
|
<span>{{ s }}</span>
|
|
</li>
|
|
</ol>
|
|
</template>
|