39 lines
1.1 KiB
Vue
39 lines
1.1 KiB
Vue
<script setup>
|
|
defineProps({
|
|
currentStep: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const steps = [
|
|
{ number: 1, name: 'department.title' },
|
|
{ number: 2, name: 'mainRole.title' },
|
|
{ number: 3, name: 'skill.title' }
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full pb-4">
|
|
<div class="flex items-center justify-center space-x-4 mb-6">
|
|
<template v-for="(step, index) in steps" :key="step.number">
|
|
<div class="flex items-center">
|
|
<div
|
|
class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-colors"
|
|
:class="currentStep >= step.number ? 'bg-primary text-primary-on' : 'bg-gray-300 text-gray-600'"
|
|
>
|
|
{{ step.number }}
|
|
</div>
|
|
<span class="ml-2 text-sm font-medium">{{ $t(step.name) }}</span>
|
|
</div>
|
|
|
|
<div
|
|
v-if="index < steps.length - 1"
|
|
class="w-8 h-1 bg-gray-300 transition-colors"
|
|
:class="currentStep > step.number ? 'bg-primary' : ''"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|