refactoring action button area of our recipies svelte part1

src/lib/components/examples/Recipies.svelte

@@ -43,32 +43,35 @@
 				start: {
 					meta: {
 						title: 'Welcome!',
-						description: 'Start your registration process by clicking next.'
+						description: 'Start your registration process by clicking next.',
+						buttonLabel: 'Start'
 					},
-					on: { NEXT: 'nameInput' }
+					on: { NEXT: 'name' }
 				},
-				nameInput: {
+				name: {
 					meta: {
 						title: 'Name Input',
 						description: 'Please enter your name.',
-						fieldLabel: 'Name'
+						fieldLabel: 'Name',
+						buttonLabel: 'Next'
 					},
 					entry: assign({
 						constraints: (context) => constraints.name || {}
 					}),
 					on: {
 						NEXT: {
-							target: 'emailInput',
+							target: 'email',
 							actions: ['setName']
 						},
 						BACK: 'start'
 					}
 				},
-				emailInput: {
+				email: {
 					meta: {
 						title: 'Email Input',
 						description: 'Please enter your email address.',
-						fieldLabel: 'Email'
+						fieldLabel: 'Email',
+						buttonLabel: 'Next'
 					},
 					entry: assign({
 						constraints: (context) => constraints.email || {}
@@ -78,13 +81,14 @@
 							target: 'summary',
 							actions: ['setEmail']
 						},
-						BACK: 'nameInput'
+						BACK: 'name'
 					}
 				},
 				summary: {
 					meta: {
 						title: 'Summary',
-						description: 'Review your details before submission.'
+						description: 'Review your details before submission.',
+						buttonLabel: 'test'
 					},
 					on: {
 						SUBMIT: 'submitting'
@@ -107,7 +111,8 @@
 				},
 				success: {
 					meta: {
-						title: 'Success'
+						title: 'Success',
+						buttonLabel: 'Start again'
 					},
 					on: {
 						RESTART: 'start'
@@ -115,7 +120,8 @@
 				},
 				failure: {
 					meta: {
-						title: 'Submission Failed'
+						title: 'Submission Failed',
+						buttonLabel: 'Restart'
 					},
 					on: {
 						RESTART: 'start'
@@ -163,7 +169,7 @@
 		<button class="px-4 py-2 mt-4 text-white bg-blue-500 rounded" on:click={() => send('NEXT')}>
 			Next
 		</button>
-	{:else if $state.value === 'nameInput'}
+	{:else if $state.value === 'name'}
 		<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
 			<div class="mb-4">
 				{#if $errors.name}
@@ -177,7 +183,7 @@
 				{/if}
 
 				<input
-					name="name"
+					name={$state.value}
 					type="text"
 					class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
 					bind:value={$form.name}
@@ -194,7 +200,7 @@
 				Next
 			</button>
 		</form>
-	{:else if $state.value === 'emailInput'}
+	{:else if $state.value === 'email'}
 		<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
 			<div class="mb-4">
 				{#if $errors.email}
@@ -208,7 +214,7 @@
 				{/if}
 
 				<input
-					name="email"
+					name={$state.value}
 					type="email"
 					class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
 					bind:value={$form.email}
@@ -253,3 +259,18 @@
 		</button>
 	{/if}
 </main>
+
+<!-- this is our new button -->
+<div>
+	{#if $state.value in stateMachine.states && stateMachine.states[$state.value].on.NEXT}
+		<button
+			class="px-4 py-2 mt-4 text-white bg-blue-500 rounded"
+			on:click={() => send('NEXT')}
+			disabled={$errors[$state.value]}
+		>
+			{$state.value in stateMachine.states
+				? stateMachine.states[$state.value].meta.buttonLabel
+				: ''}
+		</button>
+	{/if}
+</div>