componentize data page more

src/lib/components/AbstractDropdown.svelte

@@ -1,36 +1,17 @@
 <script>
+	import AbstractItem from './AbstractDropdownItem.svelte';
 	// @ts-nocheck
-	import { Label, Select, Tooltip } from 'flowbite-svelte';
 	/**
 	 * @type {any[]}
 	 */
 	// @ts-ignore
-	export let dropdownData = [];
+	export let data = [];
 	export let heading = 'dummy dropdown data';
-	const textColors = 'text-gray-700 dark:text-gray-400';
-	const basicColorBehavior =
-		'hover:text-primary-800 dark:hover:text-primary-500 group-hover:text-primary-800 dark:group-hover:text-primary-500';
-	const headerStyle = `mb-2 text-2xl font-bold tracking-tight ${textColors}`;
-	const paragraphStyle = `mb-3 font-normal leading-tight ${textColors}`;
-	const labelStyle = `mb-2 text-lg ${textColors}`;
-	const labelContainerStyle = 'flex items-center space-x-2';
-	const buttonStyle = `bg-transparent ${textColors} ${basicColorBehavior} focus:outline-none`;
 </script>
 
 <div class="items-center space-x-4 rtl:space-x-reverse">
-	<h1 class={headerStyle}>{heading}</h1>
-	{#each dropdownData as dropdown}
-		<div>
-			<div class={labelContainerStyle}>
-				<Label for="select-lg" class={labelStyle}>{dropdown.name}</Label>
-				<Tooltip>{dropdown.about}</Tooltip>
-			</div>
-			<Select
-				size="lg"
-				class={paragraphStyle}
-				items={dropdown.items}
-				bind:value={dropdown.selected}
-			/>
-		</div>
+	<h1 class="mb-2 text-2xl font-bold tracking-tight text-gray-700 dark:text-gray-400">{heading}</h1>
+	{#each data as data_element}
+		<AbstractItem data={data_element} />
 	{/each}
 </div>

src/lib/components/AbstractDropdownItem.svelte

@@ -0,0 +1,21 @@
+<script>
+	import { Label, Select, Tooltip } from 'flowbite-svelte';
+	export let data;
+
+	// 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 }));
+</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}
+	/>
+</div>

src/routes/firstdropdown/+page.svelte

@@ -1,32 +1,35 @@
 <script>
 	import AbstractContent from '$lib/components/AbstractContent.svelte';
 	import AbstractDropdown from '$lib/components/AbstractDropdown.svelte';
-	import { DropdownDataElement } from '$lib/js/dropdowndata.js';
 
 	const letteroptions = ['a', 'b', 'c', 'd'];
 	const defaultOptions = ['gar nicht', 'ansatzweise', 'weitgehend', 'zuverlässig'];
 
-	const dropdownData = [
-		new DropdownDataElement(
-			'standing up',
-			letteroptions,
-			'How well can the child stand up from sitting or crawling around and how readily is it able to do so'
-		),
-		new DropdownDataElement(
-			'gripping a pen the right way',
-			defaultOptions,
-			'How well can the child hold a pen or pencil and how coordinated can it use it'
-		),
-		new DropdownDataElement(
-			'talking in full sentences',
-			letteroptions,
-			'How well articulated is the child in its speech and how well can it express itself'
-		)
+	const data_to_display = [
+		{
+			name: 'standing up',
+			items: letteroptions,
+			about:
+				'How well can the child stand up from sitting or crawling around and how readily is it able to do so',
+			selected: false
+		},
+		{
+			name: 'gripping a pen the right way',
+			items: defaultOptions,
+			about: 'How well can the child hold a pen or pencil and how coordinated can it use it',
+			selected: false
+		},
+		{
+			name: 'talking in full sentences',
+			items: letteroptions,
+			about: 'How well articulated is the child in its speech and how well can it express itself',
+			selected: false
+		}
 	];
 
 	const heading = 'some initial dummy dropdown page';
 </script>
 
 <AbstractContent showBottomNavbar={true} lastPage="/" nextPage="/nextdropdown" infoPage="/info">
-	<AbstractDropdown {dropdownData} {heading} />
+	<AbstractDropdown data={data_to_display} {heading} />
 </AbstractContent>

src/routes/nextdropdown/+page.svelte

@@ -1,36 +1,41 @@
 <script>
 	import AbstractContent from '$lib/components/AbstractContent.svelte';
 	import AbstractDropdown from '$lib/components/AbstractDropdown.svelte';
-	import { DropdownDataElement } from '$lib/js/dropdowndata.js';
 
 	const defaultOptions = ['gar nicht', 'ansatzweise', 'weitgehend', 'zuverlässig'];
 
 	const dropdownData = [
-		new DropdownDataElement(
-			'standing up',
-			defaultOptions,
-			'How well can the child stand up from sitting or crawling around and how readily is it able to do so'
-		),
-		new DropdownDataElement(
-			'making a mess',
-			defaultOptions,
-			'This describes how efficiently the child can distribute toys in every single corner of every single room in the house'
-		),
-		new DropdownDataElement(
-			'gripping a pen the right way',
-			defaultOptions,
-			'How well can the child hold a pen or pencil and how coordinated can it use it'
-		),
-		new DropdownDataElement(
-			'talking in full sentences',
-			defaultOptions,
-			'How well articulated is the child in its speech and how well can it express itself'
-		)
+		{
+			name: 'standing up',
+			items: defaultOptions,
+			about:
+				'How well can the child stand up from sitting or crawling around and how readily is it able to do so',
+			selected: false
+		},
+		{
+			name: 'making a mess',
+			items: defaultOptions,
+			about:
+				'This describes how efficiently the child can distribute toys in every single corner of every single room in the house',
+			selected: false
+		},
+		{
+			name: 'gripping a pen the right way',
+			items: defaultOptions,
+			about: 'How well can the child hold a pen or pencil and how coordinated can it use it',
+			selected: false
+		},
+		{
+			name: 'talking in full sentences',
+			items: defaultOptions,
+			about: 'How well articulated is the child in its speech and how well can it express itself',
+			selected: false
+		}
 	];
 
 	const heading = 'the second dummy dropdown page';
 </script>
 
 <AbstractContent showBottomNavbar={true} lastPage="/firstdropdown" nextPage="/" infoPage="/info">
-	<AbstractDropdown {dropdownData} {heading} />
+	<AbstractDropdown data={dropdownData} {heading} />
 </AbstractContent>