popertotsandSisyphus
0b3d26914b
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
41 lines
1.2 KiB
Svelte
41 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
export let currentStep: number;
|
|
export let steps: string[] = ['Service', 'Date & Time', 'Details', 'Payment'];
|
|
export let startAt: number = 0;
|
|
export let className: string = '';
|
|
|
|
const totalSteps = steps.length;
|
|
</script>
|
|
|
|
<div class="mb-8 grid grid-cols-2 gap-4 md:grid-cols-3 md:gap-6 lg:flex lg:items-center lg:justify-center lg:space-x-4 {className}">
|
|
{#each steps as step, index (step)}
|
|
{@const displayNumber = startAt + index}
|
|
{@const isActive = displayNumber <= currentStep}
|
|
{@const isLastStep = index === totalSteps - 1}
|
|
|
|
<div class="flex items-center justify-start md:justify-center">
|
|
<!-- Step circle -->
|
|
<div
|
|
class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium {isActive
|
|
? 'bg-primary text-primary-foreground'
|
|
: 'bg-gray-200 text-gray-600'}"
|
|
>
|
|
{displayNumber}
|
|
</div>
|
|
|
|
<!-- Step label -->
|
|
<span class="ml-2 text-sm font-medium {isActive ? 'text-primary' : 'text-gray-600'}">
|
|
{step}
|
|
</span>
|
|
|
|
{#if !isLastStep}
|
|
<div
|
|
class="mx-4 hidden h-0.5 w-8 md:hidden lg:block {displayNumber < currentStep
|
|
? 'bg-primary'
|
|
: 'bg-gray-200'}"
|
|
></div>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|