Create registration template component

src/lib/components/AbstractContent.svelte

@@ -10,50 +10,48 @@
 
 	// variables for communication upon hitting the page
 	// FIXME: these are placeholders and must later be changed using contexts or other better mechanisms for inter component comunication
-	export let lastpage = '/';
-	export let nextpage = '/';
-	export let infopage = '/';
-	export let showNavIcons = true;
-	export let iconProps = {};
+	export let lastpage = null;
+	export let nextpage = null;
+	export let infopage = null;
 </script>
 
 <!-- Top element: basic navigation-->
 
 <!--Page content goes here-->
-<div class="mx-auto max-w-6xl flex-1 overflow-x-auto overflow-y-auto p-4 pb-20">
+<div
+	class="container mx-auto max-w-6xl flex-1 items-center justify-center overflow-x-auto overflow-y-auto p-4 pb-20"
+>
 	<slot></slot>
 </div>
 
 {#if showBottomNavbar}
 	<BottomNav
-		class="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
+		class="fixed bottom-0 left-0 right-0 justify-center border-t border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
 		classInner="grid-cols-3"
 	>
-		{#if showNavIcons}
+		{#if lastpage}
 			<BottomNavElement
 				href={lastpage}
 				description={'Zurück'}
 				Icon={CaretLeftSolid}
 				tooltip={'Zur letzten Seite'}
-				componentProps={iconProps}
 			/>
 		{/if}
 
-		<BottomNavElement
-			href={infopage}
-			description={'Hilfe'}
-			Icon={LightbulbSolid}
-			tooltip={'Zusätzliche Informationen'}
-			componentProps={iconProps}
-		/>
-
-		{#if showNavIcons}
+		{#if infopage}
+			<BottomNavElement
+				href={infopage}
+				description={'Hilfe'}
+				Icon={LightbulbSolid}
+				tooltip={'Zusätzliche Informationen'}
+			/>
+		{/if}
+		{#if nextpage}
 			<BottomNavElement
 				href={nextpage}
 				description={'Weiter'}
 				Icon={CaretRightSolid}
 				tooltip={'Zur nächsten Seite'}
-				componentProps={iconProps}
 			/>
 		{/if}
 	</BottomNav>

src/lib/components/ChildrenRegistration.svelte

@@ -0,0 +1,117 @@
+<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',
+				label: 'Name',
+				value: '',
+				required: true
+			}
+		},
+		{
+			itemComponent: Input,
+			componentProps: {
+				type: 'date',
+				name: 'dateofbirth',
+				label: 'Geburtsdatum',
+				value: '',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Bitte auswählen',
+				items: ['Ja', 'Nein'],
+				label: 'Frühgeburt',
+				value: '',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Bitte auswählen',
+				items: ['Männlich', 'Weiblich'],
+				label: 'Geschlecht',
+				value: '',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Bitte auswählen',
+				items: ['De', 'US', 'Fr', 'IT', 'Es'],
+				label: 'Nationalität',
+				value: '',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Bitte auswählen',
+				items: ['Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'],
+				label: 'Bitte geben sie die erste Sprache an die das Kind gelernt hat',
+				value: '',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Bitte auswählen',
+				items: [
+					'Kind',
+					'Enkelkind',
+					'Neffe/Nichte',
+					'Pflegekind',
+					'Adoptivkind',
+					'Betreuung extern',
+					'Betreuung zu Hause'
+				],
+				value: '',
+				label: 'Verhältnis des Kindes zu ihnen',
+				required: true
+			}
+		},
+		{
+			itemComponent: AbstractDropdownItem,
+			componentProps: {
+				name: 'Bitte auswählen',
+				items: ['Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler'],
+				value: '',
+				label: 'Entwicklungsauffälligkeiten',
+				required: true
+			}
+		},
+		{
+			itemComponent: Textarea,
+			componentProps: {
+				name: 'Bitte eintragen',
+				label: 'Sonstige Anmerkungen',
+				rows: 5,
+				value: '',
+				required: true
+			}
+		}
+	];
+	const heading = 'Neues Kind registrieren';
+
+	const buttons = [
+		{
+			label: 'Weiter',
+			href: '/'
+		}
+	];
+</script>
+
+<div class="container m-1 mx-auto w-full max-w-md">
+	<AbstractRegistrationForm {heading} props={data} {buttons} />
+</div>

src/lib/components/Childrenpage.svelte

@@ -13,7 +13,7 @@
 		data.unshift({
 			header: 'Neu',
 			summary: 'Ein neues Kind anmelden',
-			href: '/'
+			href: '/childLand/childDataInput'
 		});
 		return data;
 	}

src/lib/components/DataInput/AbstractDataInput.svelte

@@ -1,25 +1,43 @@
 <script>
-	// @ts-nocheck
-	/**
-	 * @type {any[]}
-	 */
-	// @ts-ignore
-	export let data;
-	export let heading;
-	export let itemComponent; // = AbstractDropdownItem;
-	export let description;
+	import { Heading } from 'flowbite-svelte';
+	import NavigationButtons from '../Navigation/NavigationButtons.svelte';
+	export let props = [];
+	export let heading = null;
+	export let description = null;
+	export let buttons = null;
 </script>
 
-<div class="items-center space-x-4 rtl:space-x-reverse">
-	<h1 class="mb-6 text-2xl font-bold tracking-tight text-gray-700 dark:text-gray-400">{heading}</h1>
-	<p class="mb-6 text-lg font-normal leading-tight text-gray-700 dark:text-gray-400">
-		{description}
-		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi, iste nisi amet tempora laborum natus
-		dolorum quis consectetur non ab nemo sint deleniti officiis enim a explicabo possimus. Voluptatem
-		repellat autem dicta unde ducimus. Commodi fugiat, error magnam necessitatibus fugit blanditiis cum
-		itaque nostrum quaerat, pariatur aperiam ipsum sed quo!
-	</p>
-	{#each data as data_element}
-		<svelte:component this={itemComponent} data={data_element} />
-	{/each}
+<div class="space-y-6rtl:space-x-reverse items-center justify-center space-x-4">
+	{#if heading}
+		<Heading
+			tag="h1"
+			class="mb-6 p-6 text-2xl font-bold tracking-tight text-gray-700 dark:text-gray-400"
+		>
+			{heading}
+		</Heading>
+	{/if}
+
+	{#if description}
+		<p class="mb-6 text-lg font-normal leading-tight text-gray-700 dark:text-gray-400">
+			{description}
+		</p>
+	{/if}
+
+	<form class="flex flex-col space-y-6">
+		{#each props as prop}
+			{#if prop.componentProps.label}
+				<label
+					for={prop.componentProps.name}
+					class=" font-semibold text-gray-700 dark:text-gray-400"
+				>
+					{prop.componentProps.label}
+				</label>
+			{/if}
+			<svelte:component this={prop.itemComponent} {...prop.componentProps} />
+		{/each}
+	</form>
+
+	{#if buttons}
+		<NavigationButtons {buttons} />
+	{/if}
 </div>

src/lib/components/DataInput/AbstractDropdownItem.svelte

@@ -1,21 +1,20 @@
 <script>
-	import { Label, Select, Tooltip } from 'flowbite-svelte';
-	export let data;
-
+	import { Select, Tooltip } from 'flowbite-svelte';
 	// have the data processing here to coerce the input into the format that the component expects
-	// @ts-ignore
-	data.items = data.items.map((item) => ({ name: item, value: item }));
+
+	console.log($$props);
+	const items = $$props.items.map((item) => ({ name: item, value: item }));
 </script>
 
 <div>
-	<div class="flex items-center space-x-2">
-		<Label for="select-lg" class="mb-2 text-lg text-gray-700 dark:text-gray-400">{data.name}</Label>
-		<Tooltip>{data.about}</Tooltip>
-	</div>
 	<Select
 		size="lg"
 		class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400"
-		items={data.items}
-		bind:value={data.selected}
+		{items}
+		placeholder={$$props.name}
+		bind:value={$$props.value}
 	/>
+	{#if $$props.about}
+		<Tooltip>{$$props.about}</Tooltip>
+	{/if}
 </div>

src/lib/components/DataInput/AbstractRegistrationForm.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { Card, Heading } from 'flowbite-svelte';
+	import AbstractDataInput from './AbstractDataInput.svelte';
+	export let props = [];
+	export let heading = null;
+	export let buttons = null;
+	export let description = null;
+	console.log('props: ', props);
+</script>
+
+<div class="m-1 items-center justify-center pb-6">
+	<Card>
+		{#if heading}
+			<Heading
+				tag="h3"
+				class="m-1 mb-3 p-1 text-center font-bold tracking-tight text-gray-700 dark:text-gray-400"
+				>{heading}</Heading
+			>
+		{/if}
+		<AbstractDataInput {props} {buttons} {description} />
+	</Card>
+</div>

src/lib/components/Navigation/FunctionalIcon.svelte

@@ -10,7 +10,7 @@
 
 <style>
 	:global(.functional-icon-container) {
-		@apply flex items-center space-x-4 rtl:space-x-reverse;
+		@apply flex cursor-pointer items-center space-x-4 rtl:space-x-reverse;
 	}
 
 	:global(.apply-icon-style) {

src/lib/components/Navigation/NavigationButtons.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { Button, ButtonGroup } from 'flowbite-svelte';
+
+	export let buttons = [];
+</script>
+
+<ButtonGroup class="mt-6 flex justify-center">
+	{#each buttons as bprops}
+		<Button
+			href={bprops.href}
+			class="dark:bg-primay-700 w-full bg-primary-700 text-center text-sm text-white hover:bg-primary-800 hover:text-white dark:hover:bg-primary-800"
+			>{bprops.label}</Button
+		>
+	{/each}
+</ButtonGroup>