add button to dropdown, rename to dummy dropdown.

ssciwr · Aug 20, 2024 · 465cc79 · 465cc79
1 parent e50800b
commit 465cc79
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/src/lib/components/AbstractDropdown.svelte b/src/lib/components/AbstractDropdown.svelte
@@ -1,26 +1,34 @@
 <script>
 	// @ts-nocheck
-	import { Label, Select, Tooltip } from 'flowbite-svelte';
+	import { Button, Label, Select, Tooltip } from 'flowbite-svelte';
 	import { LightbulbSolid } from 'flowbite-svelte-icons';
-
 	/**
 	 * @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';
+	const textColors = 'text-gray-700 dark:text-gray-400';
+	const basicColorBehavior =
+		textColors +
+		'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 symbolStyle = 'h-6 w-6' + textColors;
+	const labelStyle = 'mb-2 text-lg ' + textColors;
+	const labelContainerStyle = 'flex items-center space-x-2';
+	const buttonStyle = '' + basicColorBehavior;
 </script>
 
 <div class="items-center space-x-4 rtl:space-x-reverse">
 	<h1 class={headerStyle}>{heading}</h1>
 	{#each dropdownData as dropdown}
 		<div class={paragraphStyle}>
-			<Label for="select-lg" class={labelStyle}>{dropdown.name}</Label>
-			<LightbulbSolid class={symbolStyle}></LightbulbSolid>
+			<div class={labelContainerStyle}>
+				<Label for="select-lg" class={labelStyle}>{dropdown.name}</Label>
+				<Button btnClass={buttonStyle} color="light"><LightbulbSolid class={symbolStyle} /></Button>
+				<Tooltip>Hilfe</Tooltip>
+			</div>
 			<Select size="lg" class="mb-6" items={dropdown.items} bind:value={dropdown.selected} />
 			<Tooltip>{dropdown.about}</Tooltip>
 		</div>

diff --git a/src/lib/components/Dropdown.svelte → src/lib/components/DummpyDropdown.svelte b/src/lib/components/Dropdown.svelte → src/lib/components/DummpyDropdown.svelte
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import AbstractContent from '$lib/components/AbstractContent.svelte';
 
-	import Dropdown from '$lib/components/Dropdown.svelte';
+	import DummyDropdown from '$lib/components/DummpyDropdown.svelte';
 
 	const defaultOptions = ['gar nicht', 'ansatzweise', 'weitgehend', 'zuverlässig'];
 
@@ -29,5 +29,5 @@
 </script>
 
 <AbstractContent showBottomNavbar={true}>
-	<Dropdown />
+	<DummyDropdown />
 </AbstractContent>