From 61e9a92311075e414bad06f56d86246f0a84ee8a Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Tue, 27 Jul 2021 13:10:41 -0700
Subject: [PATCH] Creating a basic search filter component.

---
 src/lib/SearchFilter.svelte | 18 ++++++++++++++++++
 src/routes/index.svelte     | 17 +++++++++++------
 2 files changed, 29 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/SearchFilter.svelte

diff --git a/src/lib/SearchFilter.svelte b/src/lib/SearchFilter.svelte
new file mode 100644
index 0000000..d86d714
--- /dev/null
+++ b/src/lib/SearchFilter.svelte
@@ -0,0 +1,18 @@
+<script>
+	export let items;
+	let search = '';
+
+	$: 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>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index f3cfced..87fadaf 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,12 +1,17 @@
 <script>
-	import BetterAccordion from '$lib/BetterAccordion.svelte';
-	import Toggle from '$lib/Toggle.svelte';
+	import SearchFilter from '$lib/SearchFilter.svelte';
+	// import BetterAccordion from '$lib/BetterAccordion.svelte';
+	// import Toggle from '$lib/Toggle.svelte';
 	let isToggled = false;
+
+	let items = ['scott', 'wes', 'landon', 'courtney', 'lucie', 'brooklyn', 'Samson'];
 </script>
 
 <h1>Welcome to Level Up UI</h1>
 
-<BetterAccordion isOpen={false} buttonText="Do I need a credit card??">
+<SearchFilter {items} />
+
+<!-- <BetterAccordion isOpen={false} buttonText="Do I need a credit card??">
 	<div>
 		<p>
 			Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit iure a accusamus harum hic,
@@ -14,10 +19,10 @@
 			neque possimus! Aperiam, distinctio!
 		</p>
 	</div>
-</BetterAccordion>
+</BetterAccordion> -->
 
-<Toggle bind:isToggled label="Beta" />
-<Toggle bind:isToggled label="Beta" style="--toggleBackgroundColor: red;" />
+<!-- <Toggle bind:isToggled label="Beta" />
+<Toggle bind:isToggled label="Beta" style="--toggleBackgroundColor: red;" /> -->
 
 {#if isToggled}
 	<h1>I'm toggled</h1>