feat: search bar clear button

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);

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>