30 lines
809 B
HTML
30 lines
809 B
HTML
<ol class="flex">
|
|
@for (step of steps; track step) {
|
|
<li class="flex flex-col items-start">
|
|
<div class="flex items-center">
|
|
<button
|
|
[class.bg-blue-600]="$index <= currentStep"
|
|
class="btn py-0! px-1 rounded-full! w-min"
|
|
>
|
|
<lucide-angular
|
|
[class.text-white]="$index <= currentStep"
|
|
[class.text-gray-400]="$index > currentStep"
|
|
[img]="$index <= currentStep ? CheckIcon : CirecleIcon"
|
|
class="w-4"
|
|
/>
|
|
</button>
|
|
|
|
<!-- Connected line -->
|
|
@if (!$last) {
|
|
<hr
|
|
[class.border-blue-600]="$index < currentStep"
|
|
[class.border-gray-200]="$index >= currentStep"
|
|
class="border w-20"
|
|
/>
|
|
}
|
|
</div>
|
|
<p class="text-xs text-gray-600">{{ step.label }}</p>
|
|
</li>
|
|
}
|
|
</ol>
|