58 lines
2.2 KiB
PHP
58 lines
2.2 KiB
PHP
@php
|
|
/**
|
|
* The wizard progress bar.
|
|
*
|
|
* Callers pass $steps keyed by slug with the Bootstrap era token strings
|
|
* ("selected", "selected done", "selected error"), which are mapped to a
|
|
* state here so the call sites did not all have to change.
|
|
*/
|
|
$definitions = [
|
|
'welcome' => ['label' => 'Welcome', 'icon' => 'fa-home'],
|
|
'requirements' => ['label' => 'System Requirements', 'icon' => 'fa-list'],
|
|
'permissions' => ['label' => 'Permissions', 'icon' => 'fa-lock'],
|
|
'database' => ['label' => 'Database Info', 'icon' => 'fa-database'],
|
|
'installation' => ['label' => 'Installation', 'icon' => 'fa-terminal'],
|
|
'complete' => ['label' => 'Complete', 'icon' => 'fa-flag-checkered'],
|
|
];
|
|
|
|
$circles = [
|
|
'done' => 'bg-primary-600 text-white',
|
|
'current' => 'bg-primary-600 text-white ring-4 ring-primary-100',
|
|
'error' => 'bg-red-600 text-white ring-4 ring-red-100',
|
|
'upcoming' => 'bg-slate-100 text-slate-400',
|
|
];
|
|
|
|
$labels = [
|
|
'done' => 'text-slate-600',
|
|
'current' => 'text-primary-600 font-medium',
|
|
'error' => 'text-red-600 font-medium',
|
|
'upcoming' => 'text-slate-400',
|
|
];
|
|
@endphp
|
|
|
|
<ol class="mb-8 flex items-start justify-between gap-1">
|
|
@foreach ($definitions as $slug => $definition)
|
|
@php
|
|
$token = $steps[$slug] ?? '';
|
|
|
|
$state = match (true) {
|
|
str_contains($token, 'error') => 'error',
|
|
str_contains($token, 'done') => 'done',
|
|
str_contains($token, 'selected') => 'current',
|
|
default => 'upcoming',
|
|
};
|
|
@endphp
|
|
|
|
<li class="flex flex-1 flex-col items-center gap-2 text-center">
|
|
<span
|
|
class="flex size-10 items-center justify-center rounded-full transition-colors {{ $circles[$state] }}"
|
|
@if ($state === 'current') aria-current="step" @endif
|
|
>
|
|
<i class="fa {{ $state === 'done' ? 'fa-check' : $definition['icon'] }}" aria-hidden="true"></i>
|
|
</span>
|
|
|
|
<span class="text-xs leading-tight {{ $labels[$state] }}">{{ $definition['label'] }}</span>
|
|
</li>
|
|
@endforeach
|
|
</ol>
|