feat: complete onboarding flow

2026-10-08 14:04:29 -05:00
parent fae05ebc4c
commit 61f9bb74b4
16 changed files with 684 additions and 297 deletions
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const STEPS = ['Admin account', 'Instance', 'Provider'];
+
+defineProps<{
+    // 1 based, the steps before it show as done
+    current: number;
+}>();
+</script>
+
+<template>
+    <ol class="flex items-center gap-2 text-sm">
+        <template v-for="(step, index) in STEPS" :key="step">
+            <li v-if="index > 0" aria-hidden="true" class="flex-1 h-px bg-[var(--color-border)] [list-style-type:none]">
+            </li>
+            <li class="flex items-center gap-2 whitespace-nowrap [list-style-type:none]"
+                :aria-current="index + 1 === current ? 'step' : undefined"
+                :class="index + 1 === current ? 'font-medium text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'">
+                <span class="flex items-center justify-center w-6 h-6 rounded-md text-xs" :class="index + 1 <= current
+                    ? 'bg-[var(--color-accent)] text-[var(--color-accent-text)] font-semibold'
+                    : 'border border-[var(--color-border-active)]'">
+                    <span v-if="index + 1 < current" class="i-mynaui-check text-3.5" aria-label="Done"></span>
+                    <template v-else>{{ index + 1 }}</template>
+                </span>
+                {{ step }}
+            </li>
+        </template>
+    </ol>
+</template>