98 lines
2.0 KiB
Svelte
98 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import PhoneInput from '$lib/PhoneInput.svelte';
|
|
import StateMachine, { type StateMachinePage } from '$lib/StateMachine.svelte';
|
|
import TextInput from '$lib/TextInput.svelte';
|
|
import { ArrowRight, Check } from 'phosphor-svelte';
|
|
|
|
let stateMachineRef: StateMachine;
|
|
let index = $state(1);
|
|
|
|
const pages: StateMachinePage[] = [
|
|
{
|
|
hero: {
|
|
text: 'Hey there!',
|
|
fontSize: 'large',
|
|
colour: 'light',
|
|
size: 'large'
|
|
},
|
|
snippet: firstPage,
|
|
button: {
|
|
text: 'Next',
|
|
onclick: () => console.log('next'),
|
|
icon: {
|
|
component: ArrowRight,
|
|
props: { size: '1.2em', weight: 'bold' }
|
|
}
|
|
}
|
|
},
|
|
{
|
|
hero: {
|
|
text: 'How can we reach you?',
|
|
fontSize: 'small',
|
|
colour: 'dark',
|
|
size: 'small'
|
|
},
|
|
snippet: secondPage,
|
|
button: {
|
|
text: 'Submit',
|
|
onclick: () => console.log('finish'),
|
|
icon: {
|
|
component: Check,
|
|
props: { size: '1.2em', weight: 'bold' }
|
|
}
|
|
}
|
|
}
|
|
];
|
|
|
|
const successPage: StateMachinePage = {
|
|
disableBack: true,
|
|
hero: {
|
|
text: 'All done! 🎉',
|
|
fontSize: 'small',
|
|
size: 'large',
|
|
colour: 'light'
|
|
},
|
|
snippet: finishedSnippet,
|
|
button: false
|
|
};
|
|
|
|
const failurePage: StateMachinePage = {
|
|
disableBack: true,
|
|
hero: {
|
|
text: 'Something went wrong 😔',
|
|
fontSize: 'small',
|
|
size: 'large',
|
|
colour: 'dark'
|
|
},
|
|
snippet: failureSnippet,
|
|
button: false
|
|
};
|
|
</script>
|
|
|
|
<StateMachine
|
|
bind:this={stateMachineRef}
|
|
{pages}
|
|
success={successPage}
|
|
failure={failurePage}
|
|
{index}
|
|
></StateMachine>
|
|
|
|
{#snippet firstPage()}
|
|
<TextInput label="What's your name?" validate={{ required: true }} />
|
|
{/snippet}
|
|
|
|
{#snippet secondPage()}
|
|
<PhoneInput label="What's your phone number?" required={true} />
|
|
{/snippet}
|
|
|
|
{#snippet finishedSnippet()}
|
|
<p>All done! Thanks so much for submitting.</p>
|
|
{/snippet}
|
|
|
|
{#snippet failureSnippet()}
|
|
<p class="my-3">
|
|
We're sorry for the inconvenience. Something went wrong on our end and we couldn't process your
|
|
submission.
|
|
</p>
|
|
{/snippet}
|