popertots/Crussell
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: booking flow wizard with step indicator improvements

Browse Source 
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
popertots
2026-05-29 16:07:02 +01:00
co-authored by Sisyphus
parent aa75217898
commit 0b3d26914b
2 changed files with 102 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/booking/StepIndicator.svelte
+7 -6
View File
@@ -1,14 +1,16 @@
<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:flex md:items-center md:justify-center md:space-x-4">
<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 stepNumber = index + 1}
{@const isActive = stepNumber <= currentStep}
{@const displayNumber = startAt + index}
{@const isActive = displayNumber <= currentStep}
{@const isLastStep = index === totalSteps - 1}
<div class="flex items-center justify-start md:justify-center">
@@ -18,7 +20,7 @@
? 'bg-primary text-primary-foreground'
: 'bg-gray-200 text-gray-600'}"
>
{stepNumber}
{displayNumber}
</div>
<!-- Step label -->
@@ -26,10 +28,9 @@
{step}
</span>
<!-- Connector line (desktop only, not after last step) -->
{#if !isLastStep}
<div
class="mx-4 hidden h-0.5 w-8 md:block {stepNumber < currentStep
class="mx-4 hidden h-0.5 w-8 md:hidden lg:block {displayNumber < currentStep
? 'bg-primary'
: 'bg-gray-200'}"
></div>