alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { goto } from "$app/navigation";
3 import { resolve } from "$app/paths";
4 import X from "$icon/x";
5 import Button from "$lib/components/ui/Button.svelte";
6 import Logo from "$lib/components/ui/Logo.svelte";
7 import FinishStep from "$lib/components/welcome/FinishStep.svelte";
8 import KeysStep from "$lib/components/welcome/KeysStep.svelte";
9 import ProfileStep from "$lib/components/welcome/ProfileStep.svelte";
10 import SocialStep from "$lib/components/welcome/SocialStep.svelte";
11 import WelcomeCard from "$lib/components/welcome/WelcomeCard.svelte";
12 import { profileFilled } from "$lib/components/welcome/draft.svelte";
13 import { LAST_STEP, WELCOME_TOTAL } from "$lib/components/welcome/steps";
14
15 // the appview keeps the index in the onboarding table and gives each step its
16 // own GET route; with nothing wired up yet this is local state, so wiring it
17 // later means splitting this into /welcome/[step] and reading the record.
18 let step = $state(0);
19 let direction = $state(1);
20
21 const go = (to: number) => {
22 if (to < 0 || to >= WELCOME_TOTAL) return;
23 direction = to > step ? 1 : -1;
24 step = to;
25 };
26
27 // the appview greens Next on every step past the profile, where it is earned
28 const nextReady = $derived(step === 0 ? profileFilled() : true);
29
30 const leave = () => goto(resolve("/"));
31</script>
32
33<svelte:head>
34 <title>Welcome · Tangled</title>
35</svelte:head>
36
37<div class="flex min-h-screen w-full items-start justify-center px-4 pt-16 pb-8">
38 <main class="w-full max-w-3xl">
39 <h1 class="mb-4 flex place-content-center">
40 <Logo wordmark class="h-10" />
41 </h1>
42
43 <WelcomeCard
44 {step}
45 {direction}
46 {nextReady}
47 onBack={() => go(step - 1)}
48 onNext={() => (step === LAST_STEP ? leave() : go(step + 1))}
49 >
50 {#snippet children(current)}
51 {#if current === 0}
52 <ProfileStep />
53 {:else if current === 1}
54 <SocialStep />
55 {:else if current === 2}
56 <KeysStep />
57 {:else}
58 <FinishStep />
59 {/if}
60 {/snippet}
61 </WelcomeCard>
62
63 {#if step < LAST_STEP}
64 <div class="mt-4 flex justify-center">
65 <Button variant="ghost" icon={X} onclick={leave}>Skip onboarding</Button>
66 </div>
67 {/if}
68 </main>
69</div>