From 7509a724b3851ebf7cb584d8a3b9c931bfa6db5a Mon Sep 17 00:00:00 2001
From: afn <hey@afn.lol>
Date: Sat, 26 Nov 2022 21:11:35 -0500
Subject: [PATCH] feat: search bar clear button

---
 src/lib/components/atoms/Search.svelte       | 34 +++++++++++++++++---
 src/lib/components/molecules/TreeMenu.svelte |  6 ----
 src/routes/patches/+page.svelte              |  2 +-
 static/icons/close.svg                       |  1 +
 4 files changed, 31 insertions(+), 12 deletions(-)
 create mode 100644 static/icons/close.svg

diff --git a/src/lib/components/atoms/Search.svelte b/src/lib/components/atoms/Search.svelte
index 04c3cab..d5995cb 100644
--- a/src/lib/components/atoms/Search.svelte
+++ b/src/lib/components/atoms/Search.svelte
@@ -1,20 +1,44 @@
 <script lang="ts">
 	export let title: string;
-    export let searchTerm: string;
+	export let searchTerm: string | null;
+	import { fade } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 </script>
 
 <div>
-	<img src="../icons/search.svg" alt="Search" />
-	<input type="text" placeholder={title} bind:value={searchTerm} />
+	<img src="../icons/search.svg" id="search" alt="Search" />
+	{#if searchTerm}
+		<img
+			src="../icons/close.svg"
+			id="clear"
+			alt="Close"
+			on:click={() => (searchTerm = null)}
+			on:keypress={() => (searchTerm = null)}
+			transition:fade|local={{ easing: quintOut, duration: 250 }}
+		/>
+	{/if}
+	<input type="text" class:clear={searchTerm} placeholder={title} bind:value={searchTerm} />
 </div>
 
 <style>
-	img {
+	#search {
 		position: absolute;
 		height: 20px;
 		transform: translate(60%, 60%);
 	}
 
+	#clear {
+		position: absolute;
+		z-index: 1;
+		height: 20px;
+		cursor: pointer;
+		transform: translate(1060%, 60%);
+	}
+
+	.clear {
+		padding-right: 2.5rem;
+	}
+
 	input {
 		position: relative;
 		display: flex;
@@ -24,7 +48,7 @@
 		background-color: transparent;
 		color: var(--grey-five);
 		padding-left: 2.5rem;
-        width: 100%;
+		width: 100%;
 	}
 	input::placeholder {
 		color: var(--grey-five);
diff --git a/src/lib/components/molecules/TreeMenu.svelte b/src/lib/components/molecules/TreeMenu.svelte
index 01cc9f1..58d3c71 100644
--- a/src/lib/components/molecules/TreeMenu.svelte
+++ b/src/lib/components/molecules/TreeMenu.svelte
@@ -1,7 +1,3 @@
-<script lang="ts">
-	export let title: string;
-</script>
-
 <div class="menu">
 	<div class="package-list">
 		<slot />
@@ -19,7 +15,6 @@
 		top: 70px;
 		padding-top: calc(6rem - 70px);
 		overflow-y: scroll;
-
 	}
 
 	.package-list {
@@ -30,5 +25,4 @@
 		white-space: normal;
 		word-break: break-all;
 	}
-
 </style>
diff --git a/src/routes/patches/+page.svelte b/src/routes/patches/+page.svelte
index 7adb18c..d884baf 100644
--- a/src/routes/patches/+page.svelte
+++ b/src/routes/patches/+page.svelte
@@ -52,7 +52,7 @@
 <main>
 	<aside in:fly={{ y: 10, easing: quintOut, duration: 750, delay: 100 }}>
 		<TreeMenu title="Search patches...">
-			<Search bind:searchTerm title="Search patches..." />
+			<Search bind:searchTerm title="Search patches" />
 			<span>
 				{#each packages as pkg}
 					<TreeMenuButton bind:current name={pkg} />
diff --git a/static/icons/close.svg b/static/icons/close.svg
new file mode 100644
index 0000000..7a78712
--- /dev/null
+++ b/static/icons/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" fill="#ACC0D3"/></svg>
\ No newline at end of file