49 lines
2 KiB
PHP
49 lines
2 KiB
PHP
@props(['currentStep', 'totalSteps', 'steps' => []])
|
|
|
|
<div class="mb-8">
|
|
<div class="flex items-center justify-center">
|
|
@foreach($steps as $index => $step)
|
|
@php
|
|
$stepNumber = $index + 1;
|
|
$isActive = $stepNumber === $currentStep;
|
|
$isCompleted = $stepNumber < $currentStep;
|
|
@endphp
|
|
|
|
{{-- Step Circle --}}
|
|
<div class="flex flex-col items-center">
|
|
<div class="flex items-center">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-full border-2
|
|
{{ $isCompleted ? 'bg-accent-600 border-accent-600' : '' }}
|
|
{{ $isActive ? 'bg-accent-600 border-accent-600' : '' }}
|
|
{{ !$isActive && !$isCompleted ? 'bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-600' : '' }}">
|
|
@if($isCompleted)
|
|
<flux:icon.check class="h-5 w-5 text-white" />
|
|
@else
|
|
<span class="text-sm font-semibold
|
|
{{ $isActive ? 'text-white' : 'text-zinc-500 dark:text-zinc-400' }}">
|
|
{{ $stepNumber }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Step Label --}}
|
|
<div class="mt-2 text-center">
|
|
<p class="text-xs font-medium
|
|
{{ $isActive ? 'text-accent-600 dark:text-accent-400' : 'text-zinc-500 dark:text-zinc-400' }}">
|
|
{{ $step }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Connector Line --}}
|
|
@if(!$loop->last)
|
|
<div class="flex-1 h-0.5 mx-4
|
|
{{ $stepNumber < $currentStep ? 'bg-accent-600' : 'bg-zinc-300 dark:bg-zinc-600' }}"
|
|
style="min-width: 60px; max-width: 120px;">
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|