correct error, add children pages

src/lib/components/DataInput/AbstractDropdownItem.svelte

@@ -11,7 +11,7 @@
 		class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400"
 		{items}
 		placeholder={$$props.name}
-		bind:value={$$props.selected}
+		bind:value={$$props.value}
 	/>
 	{#if $$props.about}
 		<Tooltip>{$$props.about}</Tooltip>

src/routes/registerChild/+page.svelte → src/routes/childLand/childDataInput/+page.svelte

@@ -1,5 +1,4 @@
 <script>
-	import AbstractContent from '$lib/components/AbstractContent.svelte';
 	import AbstractDropdownItem from '$lib/components/DataInput/AbstractDropdownItem.svelte';
 	import AbstractRegistrationForm from '$lib/components/DataInput/AbstractRegistrationForm.svelte';
 	import { Input, Textarea } from 'flowbite-svelte';
@@ -105,10 +104,23 @@
 		}
 	];
 	const heading = 'Neues Kind registrieren';
+
+	const buttons = [
+		{
+			label: 'Zurück',
+			href: '/userLand/userDataValidation'
+		},
+		{
+			label: 'Info',
+			href: '/info'
+		},
+		{
+			label: 'Weiter',
+			href: '/childLand/childDataValidation'
+		}
+	];
 </script>
 
 <div class="m-1 w-full max-w-md items-center justify-center">
-	<AbstractContent infopage={'/info'} lastpage={'/registerUser/userDataValidation'} nextpage={'/'}>
-		<AbstractRegistrationForm {heading} props={data} />
-	</AbstractContent>
+	<AbstractRegistrationForm {heading} props={data} {buttons} />
 </div>

src/routes/childLand/childDataValidation/+page.svelte

@@ -0,0 +1,118 @@
+<script>
+	import AbstractDropdownItem from '$lib/components/DataInput/AbstractDropdownItem.svelte';
+	import AbstractRegistrationForm from '$lib/components/DataInput/AbstractRegistrationForm.svelte';
+	import { Input, Textarea } from 'flowbite-svelte';
+	const data = [
+		{
+			itemComponent: Input,
+			componentProps: {
+				type: 'text',
+				name: 'name',
+				placeholder: 'Name',
+				// label: 'Name',
+				value: 'Tom',
+				required: true
+			}
+		},
+		{
+			itemComponent: Input,
+			componentProps: {
+				type: 'date',
+				name: 'dateofbirth',
+				placeholder: 'Geburtsdatum',
+				// label: 'Geburtsdatum',
+				value: '2021-05-22',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Frühgeburt?',
+				items: ['Ja', 'Nein'],
+				// label: 'Frühgeburt',
+				value: 'Nein',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Geschlecht',
+				items: ['Männlich', 'Weiblich'],
+				// label: 'Geschlecht',
+				value: 'Weiblich',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Nationalität',
+				items: ['De', 'US', 'Fr', 'IT', 'Es'],
+				// label: 'Geschlecht',
+				value: 'De',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Muttersprache',
+				items: ['Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'],
+				// label: 'Geschlecht',
+				value: 'Englisch (UK)',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Verhältnis des Kindes zu ihnen',
+				items: [
+					'Kind',
+					'Enkelkind',
+					'Neffe/Nichte',
+					'Pflegekind',
+					'Adoptivkind',
+					'Betreuung extern',
+					'Betreuung zu Hause'
+				],
+				value: 'Betreuung extern',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Entwicklungsauffälligkeiten',
+				items: ['Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler'],
+				value: 'Hörprobleme',
+				required: true
+			}
+		},
+		{
+			itemComponent: Textarea,
+			componentProps: {
+				name: 'Anmerkungen',
+				label: 'Anmerkungen',
+				placeholder: 'Anmerkungen',
+				rows: 5,
+				value: 'this that and the other',
+				required: true
+			}
+		}
+	];
+	const heading = 'Daten des Kindes überprüfen';
+
+	const buttons = [
+		{
+			label: 'Fertig',
+			href: '/'
+		}
+	];
+</script>
+
+<div class="m-1 w-full max-w-md items-center justify-center">
+	<AbstractRegistrationForm {heading} props={data} {buttons} />
+</div>

src/routes/userLand/userDataValidation/+page.svelte

@@ -3,7 +3,13 @@
 	import AbstractRegistrationForm from '$lib/components/DataInput/AbstractRegistrationForm.svelte';
 	import { Input } from 'flowbite-svelte';
 
-	function range(size, startAt = 0, step = 1) {
+	function intervalRange(size, startAt = 0, step = 1) {
+		return [...Array(size).keys()].map(
+			(i) => String(i * step + startAt) + '-' + String((i + 1) * step + startAt)
+		);
+	}
+
+	function numericalRange(size, startAt = 0, step = 1) {
 		return [...Array(size).keys()].map((i) => i * step + startAt);
 	}
 
@@ -12,7 +18,7 @@
 			itemComponent: AbstractDropdownItem,
 			componentProps: {
 				name: 'Geburtsjahr',
-				items: range(100, 1920),
+				items: numericalRange(100, 1920),
 				about: 'Wählen sie ihr Geburtsjahr aus',
 				selected: 1988
 			}
@@ -48,20 +54,20 @@
 			itemComponent: AbstractDropdownItem,
 			componentProps: {
 				name: 'Arbeitszeit/Woche',
-				items: range(13, 0, 5),
+				items: intervalRange(13, 0, 5),
 				about:
 					'Wählen sie ihre Arbeitszeit pro Woche aus. Wählen sie die Zahl, die dem tatsächlichen Wert am nächsten kommt.',
-				selected: 40
+				selected: '35-40'
 			}
 		},
 		{
 			itemComponent: AbstractDropdownItem,
 			componentProps: {
 				name: 'Familieneinkommen/Jahr',
-				items: range(23, 0, 5000),
+				items: intervalRange(23, 0, 5000),
 				about:
 					'Wählen sie ihre Jahreseinkommen aus. Wählen sie die Zahl, die dem tatsächlichen Wert am nächsten kommt.',
-				selected: 50000
+				selected: '50000-55000'
 			}
 		},
 
@@ -79,7 +85,7 @@
 	const heading = 'Überprüfen sie ihre Daten';
 	const description = 'Bitte überprüfen sie ihre Daten und korrigieren sie diese gegebenenfalls.';
 
-	const buttons = [{ label: 'Abschicken', href: '/' }];
+	const buttons = [{ label: 'Abschicken', href: '/childLand/childDataInput' }];
 </script>
 
 <div class="container m-1 mx-auto w-full max-w-md">