Something went wrong. Try again.
A downstream fork of Tranquil PDS for use in margin.cafe
Something went wrong. Try again.
1.4 kB · 40 lines
Svelte
1234567891011121314151617181920212223242526272829303132333435363738394041<script lang="ts"> type StepState = 'completed' | 'current' | 'upcoming'
interface Props { steps: string[] currentIndex: number formatProgressLabel?: (step: string, index: number, total: number, state: StepState) => string }
let { steps, currentIndex, formatProgressLabel = (step, index, total, state) => `${step} · ${index}/${total}${state === 'completed' ? ' · ✓' : ''}`, }: Props = $props()
const safeCurrentIndex = $derived(Math.min(Math.max(currentIndex, 0), steps.length - 1))</script>
<ol class="step-indicator"> {#each steps as step, i} {@const state = i < safeCurrentIndex ? 'completed' : i === safeCurrentIndex ? 'current' : 'upcoming'} <li class="step" class:active={state === 'current'} class:completed={state === 'completed'} aria-current={state === 'current' ? 'step' : undefined} aria-label={formatProgressLabel(step, i + 1, steps.length, state)} > <span class="step-dot" aria-hidden="true">{state === 'completed' ? '✓' : i + 1}</span> <span class="step-label" aria-hidden="true">{step}</span> {#if i < steps.length - 1} <span class="step-line" class:completed={i < safeCurrentIndex} aria-hidden="true"></span> {/if} </li> {/each}</ol><div class="current-step-label"> <strong>{steps[safeCurrentIndex]}</strong> · {safeCurrentIndex + 1}/{steps.length}</div>