51 lines
1.9 KiB
PHP
51 lines
1.9 KiB
PHP
<ul class="relative flex flex-col md:flex-row gap-2">
|
|
@foreach ($steps as $index => $step)
|
|
@php
|
|
$stepNumber = $index + 1;
|
|
$isCompleted = $stepNumber < $currentStep;
|
|
$isActive = $stepNumber === $currentStep;
|
|
@endphp
|
|
|
|
<li class="md:shrink md:basis-0 flex-1 group flex gap-x-2 md:block">
|
|
<div
|
|
class="min-w-7 min-h-7 flex flex-col items-center md:w-full md:inline-flex md:flex-wrap md:flex-row text-xs align-middle">
|
|
|
|
{{-- Circle --}}
|
|
<span @class([
|
|
'size-7 flex justify-center items-center shrink-0 rounded-full font-medium',
|
|
'bg-primary-600 text-white' => $isActive || $isCompleted,
|
|
'bg-gray-100 text-gray-800 dark:bg-neutral-700 dark:text-white' =>
|
|
!$isActive && !$isCompleted,
|
|
])>
|
|
@if ($isCompleted)
|
|
✓
|
|
@else
|
|
{{ $stepNumber }}
|
|
@endif
|
|
</span>
|
|
|
|
{{-- Line --}}
|
|
<div
|
|
class="mt-2 w-px h-full md:mt-0 md:ms-2 md:w-full md:h-px md:flex-1
|
|
{{ $loop->last ? 'hidden' : 'bg-gray-200 dark:bg-neutral-700' }}">
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Content --}}
|
|
<div class="grow md:grow-0 md:mt-3 pb-5">
|
|
<span @class([
|
|
'block text-sm font-medium',
|
|
'text-primary-600' => $isActive || $isCompleted,
|
|
'text-gray-800 dark:text-white' => !$isActive && !$isCompleted,
|
|
])>
|
|
{{ $step['title'] }}
|
|
</span>
|
|
|
|
<p class="text-sm text-gray-800 dark:text-neutral-500">
|
|
{{ $step['description'] }}
|
|
</p>
|
|
</div>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|