add descriptions and update links

ssciwr · Aug 21, 2024 · 0021fe3 · 0021fe3
1 parent b004afb
commit 0021fe3
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 8 deletions.
diff --git a/src/lib/components/DataInput/AbstractDataInput.svelte b/src/lib/components/DataInput/AbstractDataInput.svelte
@@ -7,10 +7,18 @@
 	export let data;
 	export let heading;
 	export let itemComponent; // = AbstractDropdownItem;
+	export let description;
 </script>
 
 <div class="items-center space-x-4 rtl:space-x-reverse">
-	<h1 class="mb-2 text-2xl font-bold tracking-tight text-gray-700 dark:text-gray-400">{heading}</h1>
+	<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}

diff --git a/src/routes/firstdropdown/+page.svelte b/src/routes/firstdropdown/+page.svelte
@@ -5,7 +5,7 @@
 
 	const letteroptions = ['a', 'b', 'c', 'd'];
 	const defaultOptions = ['gar nicht', 'ansatzweise', 'weitgehend', 'zuverlässig'];
-
+	const description = 'This is a dummy dropdown page to test the dropdown component';
 	const data_to_display = [
 		{
 			name: 'standing up',
@@ -31,6 +31,11 @@
 	const heading = 'some initial dummy dropdown page';
 </script>
 
-<AbstractContent showBottomNavbar={true} lastpage="/" nextpage="/nextdropdown" infopage="/info">
-	<AbstractDataInput data={data_to_display} {heading} itemComponent={AbstractDropdownItem} />
+<AbstractContent showBottomNavbar={true} lastpage={'/'} nextpage={'/nextdropdown'} infopage="/info">
+	<AbstractDataInput
+		data={data_to_display}
+		{heading}
+		itemComponent={AbstractDropdownItem}
+		{description}
+	/>
 </AbstractContent>
diff --git a/src/routes/info/+page.svelte b/src/routes/info/+page.svelte
@@ -2,6 +2,6 @@
 	import AbstractContent from '$lib/components/AbstractContent.svelte';
 </script>
 
-<AbstractContent showBottomNavbar={true} lastPage="/" nextPage="/" infoPage="/info">
+<AbstractContent showBottomNavbar={true} lastpage="/" nextpage="/" infoPage="/info">
 	<h1>Info page</h1>
 </AbstractContent>
diff --git a/src/routes/nextdropdown/+page.svelte b/src/routes/nextdropdown/+page.svelte
@@ -4,7 +4,7 @@
 	import AbstractDropdownItem from '$lib/components/DataInput/AbstractDropdownItem.svelte';
 
 	const defaultOptions = ['gar nicht', 'ansatzweise', 'weitgehend', 'zuverlässig'];
-
+	const description = 'This is the second data selection page to test the dropdown component';
 	const dropdownData = [
 		{
 			name: 'standing up',
@@ -37,6 +37,16 @@
 	const heading = 'the second data selection page';
 </script>
 
-<AbstractContent showBottomNavbar={true} lastPage="/firstdropdown" nextPage="/" infoPage="/info">
-	<AbstractDataInput data={dropdownData} {heading} itemComponent={AbstractDropdownItem} />
+<AbstractContent
+	showBottomNavbar={true}
+	lastpage={'/firstdropdown'}
+	nextpage={'/'}
+	infopage="/info"
+>
+	<AbstractDataInput
+		data={dropdownData}
+		{heading}
+		itemComponent={AbstractDropdownItem}
+		{description}
+	/>
 </AbstractContent>