CluPilotCloud/resources/views/components/ui/progress-stepper.blade.php

32 lines
1.3 KiB
PHP

@props([
// array of ['label' => string, 'state' => pending|running|done|failed]
'steps' => [],
])
<ol class="space-y-0">
@foreach ($steps as $i => $step)
@php
$state = $step['state'] ?? 'pending';
$isLast = $loop->last;
$dot = [
'done' => 'bg-success border-success',
'running' => 'bg-info border-info animate-pulse',
'failed' => 'bg-danger border-danger',
'pending' => 'bg-surface border-line-strong',
][$state] ?? 'bg-surface border-line-strong';
$labelTone = $state === 'pending' ? 'text-muted' : 'text-ink';
@endphp
<li class="flex gap-3">
<div class="flex flex-col items-center">
<span class="mt-1 size-3 shrink-0 rounded-pill border-2 {{ $dot }}" aria-hidden="true"></span>
@unless ($isLast)
<span class="w-px flex-1 bg-line" aria-hidden="true"></span>
@endunless
</div>
<div class="pb-4">
<p class="text-sm font-medium {{ $labelTone }}">{{ $step['label'] }}</p>
<p class="text-xs text-faint">{{ __('dashboard.step_state.'.$state) }}</p>
</div>
</li>
@endforeach
</ol>