From 1ce29699f625d6bc744cecd90c3a8e0fd5b5317d Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Tue, 27 Jul 2021 13:28:56 -0700
Subject: [PATCH] Search input transitions on items, styling items on search
 and hover, exporting search from component.

---
 src/lib/SearchFilter.svelte | 63 +++++++++++++++++++++++++++++++------
 src/routes/index.svelte     |  6 ++--
 2 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/src/lib/SearchFilter.svelte b/src/lib/SearchFilter.svelte
index d86d714..f398178 100644
--- a/src/lib/SearchFilter.svelte
+++ b/src/lib/SearchFilter.svelte
@@ -1,18 +1,61 @@
 <script>
+	import { fade } from 'svelte/transition';
 	export let items;
-	let search = '';
+	export let search = '';
+	let isFocused = false;
 
 	$: filteredSearch = items.filter((item) => {
 		return search === '' || item.toLowerCase().indexOf(search.toLowerCase()) !== -1;
 	});
 </script>
 
-<label>
-	Search Names: <br />
-	<input bind:value={search} type="text" placeholder="Search" />
-</label>
-<ul>
-	{#each filteredSearch as item}
-		<li>{item}</li>
-	{/each}
-</ul>
+<div class="wrapper">
+	<label>
+		Search Names: <br />
+		<input
+			on:focus={() => (isFocused = true)}
+			bind:value={search}
+			type="text"
+			placeholder="Search"
+		/>
+	</label>
+
+	{#if isFocused}
+		<ul transition:fade={{ duration: 200 }}>
+			{#each filteredSearch as item}
+				<li
+					transition:fade={{ duration: 200 }}
+					on:click={() => {
+						search = item;
+						isFocused = false;
+					}}
+				>
+					{item}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>
+
+<style>
+	.wrapper {
+		position: relative;
+		display: inline-block;
+	}
+	ul {
+		position: absolute;
+		width: 100%;
+		border: 1px solid black;
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+	li {
+		padding: 10px;
+		cursor: pointer;
+		transition: 0.3s background ease;
+	}
+	li:hover {
+		background: var(--listItemBackground, #eee);
+	}
+</style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 87fadaf..9a6357e 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -3,13 +3,13 @@
 	// import BetterAccordion from '$lib/BetterAccordion.svelte';
 	// import Toggle from '$lib/Toggle.svelte';
 	let isToggled = false;
-
+	let search = '';
 	let items = ['scott', 'wes', 'landon', 'courtney', 'lucie', 'brooklyn', 'Samson'];
 </script>
 
-<h1>Welcome to Level Up UI</h1>
+<h1>Welcome to Level Up UI {search}</h1>
 
-<SearchFilter {items} />
+<SearchFilter {items} bind:search />
 
 <!-- <BetterAccordion isOpen={false} buttonText="Do I need a credit card??">
 	<div>