make new Buttongroup component

ssciwr · Aug 26, 2024 · 524d399 · 524d399
1 parent 1e15d3d
commit 524d399
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 27 deletions.
diff --git a/src/lib/components/DataInput/AbstractDataInput.svelte b/src/lib/components/DataInput/AbstractDataInput.svelte
@@ -1,4 +1,5 @@
 <script>
+	import NavigationButtons from '../Navigation/NavigationButtons.svelte';
 	import { Button, ButtonGroup, Heading } from 'flowbite-svelte';
 	export let props = [];
 	export let heading = null;
@@ -37,14 +38,7 @@
 	</form>
 
 	{#if buttons}
-		<ButtonGroup class="mt-6 flex justify-center">
-			{#each buttons as bprops}
-				<Button
-					href={bprops.href}
-					class="dark:bg-primay-700 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>
+		<NavigationButtons {buttons} />
 	{/if}
+
 </div>
diff --git a/src/lib/components/DataInput/AbstractRegistrationForm.svelte b/src/lib/components/DataInput/AbstractRegistrationForm.svelte
@@ -4,6 +4,7 @@
 	export let props = [];
 	export let heading = null;
 	export let buttons = null;
+	export let description = null;
 </script>
 
 <div class="m-1 items-center justify-center pb-6">
@@ -15,6 +16,6 @@
 				>{heading}</Heading
 			>
 		{/if}
-		<AbstractDataInput {props} {buttons} />
+		<AbstractDataInput {props} {buttons} {description} />
 	</Card>
 </div>
diff --git a/src/lib/components/Navigation/NavigationButtons.svelte b/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 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>
diff --git a/src/routes/userLand/userDataInput/+page.svelte b/src/routes/userLand/userDataInput/+page.svelte
@@ -91,7 +91,7 @@
 
 	let props = user_props;
 
-	$: if (role === 'Forscher/in') {
+	$: if (role === 'researcher') {
 		props = user_props;
 		props.push({
 			itemComponent: AbstractDropdownItem,
@@ -139,7 +139,7 @@
 		},
 		{
 			label: 'Weiter',
-			href: '/childLand/childDataInput'
+			href: '/userLand/userLogin'
 		}
 	];
 </script>

diff --git a/src/routes/userLand/userLogin/+page.svelte b/src/routes/userLand/userLogin/+page.svelte
@@ -2,10 +2,12 @@
 	import AbstractRegistrationForm from '$lib/components/DataInput/AbstractRegistrationForm.svelte';
 	import { Input } from 'flowbite-svelte';
 
-	const default_data = [
+	export let role = 'user';
+
+	let data = [
 		{
 			itemComponent: Input,
-			componentData: {
+			componentProps: {
 				type: 'text',
 				name: 'Benutzerkennung',
 				placeholder: 'Benutzerkennung',
@@ -16,7 +18,7 @@
 		},
 		{
 			itemComponent: Input,
-			componentData: {
+			componentProps: {
 				type: 'password',
 				name: 'Passwort',
 				placeholder: 'Passwort',
@@ -27,14 +29,10 @@
 		}
 	];
 
-	export let data = default_data;
-
-	export let role = 'user';
-
-	if (role === 'admin') {
+	$: if (role === 'admin') {
 		data.push({
 			itemComponent: Input,
-			componentData: {
+			componentProps: {
 				type: 'text',
 				name: 'Projektcode',
 				placeholder: 'Projektcode',
@@ -54,10 +52,5 @@
 </script>
 
 <div>
-	<AbstractRegistrationForm
-		props={data}
-		heading={'Login'}
-		{buttons}
-		href={'/userLand/userDataInput'}
-	/>
+	<AbstractRegistrationForm heading={'Einloggen'} {buttons} props={data} />
 </div>