29 lines
771 B
Svelte
29 lines
771 B
Svelte
<script lang="ts">
|
|
// Props
|
|
let { currentStep, totalSteps, stepTitle } = $props<{
|
|
currentStep: number;
|
|
totalSteps: number;
|
|
}>();
|
|
</script>
|
|
|
|
<div class="mb-8">
|
|
<div class="flex items-center justify-center gap-4 w-full">
|
|
{#each Array(totalSteps) as _, index}
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium {
|
|
index === currentStep ? 'bg-blue-600 text-white' :
|
|
index < currentStep ? 'bg-green-600 text-white' :
|
|
'bg-gray-200 text-gray-600'
|
|
}">
|
|
{index + 1}
|
|
</div>
|
|
{#if index < totalSteps - 1}
|
|
<div class="w-10 h-1 rounded {
|
|
index < currentStep ? 'bg-green-600' : 'bg-gray-200'
|
|
}"></div>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|