add outline for dropdown elements

src/lib/components/AbstractDropdown.svelte

@@ -1,46 +1,28 @@
 <script>
-	import { Button, Dropdown, DropdownDivider, DropdownItem } from 'flowbite-svelte';
-	import { ChevronDownOutline } from 'flowbite-svelte-icons';
+	// @ts-nocheck
+	import { Label, Select, Tooltip } from 'flowbite-svelte';
+	import { LightbulbSolid } from 'flowbite-svelte-icons';
 
-	export class DropdownData {
-		constructor(items, name) {
-			this.items = items;
-			this.name = name;
-			this.selected = false;
-		}
-	}
-
-	export let header = 'dummy dropdown data';
-	export const defaultOptions = ['gar nicht', 'ansatzweise', 'weitgehend', 'zuverlässig'];
-
-	export let dropdownData = [
-		new DropdownData(defaultOptions, 'standing up'),
-		new DropdownData(defaultOptions, 'making a mess'),
-		new DropdownData(defaultOptions, 'gripping a pen the right way')
-	];
-
-	const style = {
-        basic: {}, 
-		buttonstyle: {
-			button: ,
-			icon: ''
-		},
-		dropdownstyle: {
-			item: '',
-			dropdown: ''
-		}
-	};
+	/**
+	 * @type {any[]}
+	 */
+	// @ts-ignore
+	export let dropdownData = [];
+	export let heading = 'dummy dropdown data';
+	const headerStyle = 'mb-2 text-2xl font-bold tracking-tight text-gray-700 dark:text-gray-400';
+	const paragraphStyle = 'mb-3 font-normal text-gray-700 dark:text-gray-400 leading-tight';
+	const symbolStyle = 'h-6 w-6 text-gray-700 dark:text-gray-400';
+	const labelStyle = 'mb-2 text-lg text-gray-700 dark:text-gray-400';
 </script>
 
-<div>
-	<h1>{header}</h1>
+<div class="items-center space-x-4 rtl:space-x-reverse">
+	<h1 class={headerStyle}>{heading}</h1>
 	{#each dropdownData as dropdown}
-		<Button class={style.buttonstyle.button}>{dropdown.name} <ChevronDownOutline /></Button>
-		<Dropdown>
-			{#each dropdown.items as item}
-				<DropdownItem>{item}</DropdownItem>
-				<DropdownDivider />
-			{/each}
-		</Dropdown>
+		<div class={paragraphStyle}>
+			<Label for="select-lg" class={labelStyle}>{dropdown.name}</Label>
+			<LightbulbSolid class={symbolStyle}></LightbulbSolid>
+			<Select size="lg" class="mb-6" items={dropdown.items} bind:value={dropdown.selected} />
+			<Tooltip>{dropdown.about}</Tooltip>
+		</div>
 	{/each}
 </div>

src/lib/components/Dropdown.svelte

@@ -0,0 +1,33 @@
+<script>
+	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'
+		)
+	];
+
+	const heading = 'some dummy dropdown page';
+</script>
+
+<AbstractDropdown {dropdownData} {heading} />

src/lib/js/dropdowndata.js

@@ -0,0 +1,14 @@
+// @ts-nocheck
+export class DropdownDataElement {
+	/**
+	 * @param {any} name
+	 * @param {any} items
+	 * @param {any} about
+	 */
+	constructor(name, items, about) {
+		this.items = items.map((item) => ({ value: item, name: item }), items);
+		this.name = name;
+		this.about = about;
+		this.selected = false;
+	}
+}

src/routes/+page.svelte

@@ -1,36 +1,33 @@
 <script>
-	import logo_dark from '$lib/assets/mondey_dark.svg';
-	import logo_light from '$lib/assets/mondey_light.svg';
-	import AbstractDropdown from '$lib/components/AbstractDropdown.svelte';
-	import {
-		Banner,
-		DarkMode,
-		Navbar,
-		NavBrand,
-		NavHamburger,
-		NavLi,
-		NavUl,
-		P
-	} from 'flowbite-svelte';
-</script>
+	import AbstractContent from '$lib/components/AbstractContent.svelte';
+
+	import Dropdown from '$lib/components/Dropdown.svelte';
+
+	const defaultOptions = ['gar nicht', 'ansatzweise', 'weitgehend', 'zuverlässig'];
 
-<Banner><P>This is a work-in-progress prototype frontend for the MONDEY website</P></Banner>
-<Navbar>
-	<NavBrand href="/">
-		<img src={logo_light} class="block h-16 dark:hidden" alt="MONDEY Logo" />
-		<img src={logo_dark} class="hidden h-16 dark:block" alt="MONDEY Logo" />
-	</NavBrand>
-	<NavHamburger />
-	<NavUl>
-		<NavLi href="/" active={true}>Home</NavLi>
-		<NavLi href="/">Downloads</NavLi>
-		<NavLi href="/">Aktuelles</NavLi>
-		<NavLi href="/">Kontakt</NavLi>
-	</NavUl>
-	<DarkMode />
-</Navbar>
-<div class="flex flex-col items-center justify-center"></div>
+	const dropdownData = [
+		{
+			name: 'standing up',
+			items: defaultOptions,
+			tooltip:
+				'How well can the child stand up from sitting or crawling around and how readily is it able to do so'
+		},
+		{
+			name: 'making a mess',
+			items: defaultOptions,
+			tooltip:
+				'This describes how efficiently the child can distribute toys in every single corner of every single room in the house'
+		},
+		{
+			name: 'gripping a pen the right way',
+			items: defaultOptions,
+			tooltip: 'How well can the child hold a pen or pencil and how coordinated can it use it'
+		}
+	];
+
+	const heading = 'some dummy dropdown page';
+</script>
 
-<div>
-	<AbstractDropdown></AbstractDropdown>
-</div>
+<AbstractContent showBottomNavbar={true}>
+	<Dropdown />
+</AbstractContent>