Merge pull request #50 from pvdthings/SearchIcons

Add icon for search and clear search

src/lib/components/TextInput.svelte

@@ -20,7 +20,7 @@
     on:change
     on:keyup={keyReleased}
     class:invalid
-    class="px-4 py-2 brutal hovers outline-none {customClass}"
+    class="w-full px-4 py-2 pl-10 brutal hovers outline-none {customClass}"
 />
 
 <style lang="postcss">

src/lib/views/SearchInputView.svelte

@@ -0,0 +1,21 @@
+<script>
+	import { TextInput } from '$lib/components';
+	import { t } from '$lib/language/translate';
+	import { searchFilter } from '$lib/stores/catalog';
+	import XMarkIcon from '$lib/icons/x-mark.svg';
+	import SearchIcon from '$lib/icons/magnifying-glass.svg';
+
+	const clearSearch = () => {
+		$searchFilter = '';
+	};
+</script>
+
+<div class="relative">
+	<img src={SearchIcon} alt="searchIcon" class="w-6 h-6 absolute top-2.5 left-2 transform" />
+	<TextInput bind:value={$searchFilter} placeholder={$t('Input.Search')} />
+	{#if $searchFilter.length > 0}
+		<button class="btn btn-circle btn-sm btn-ghost absolute right-2 top-1.5" on:click={clearSearch}>
+			<img src={XMarkIcon} alt="searchIcon" class="w-5 h-5 absolute top-1.75 left-2.25 transform" />
+		</button>
+	{/if}
+</div>

src/routes/+page.svelte

@@ -7,15 +7,16 @@
 	import ThingsView from '$lib/views/ThingsView.svelte';
 	import WishListButtonView from '$lib/views/WishListButtonView.svelte';
 	import CategoryChooserView from '$lib/views/CategoryChooserView.svelte';
+	import SearchInputView from '$lib/views/SearchInputView.svelte';
 
 	export let data;
 
 	$things = data.things;
-  $categories = data.categories;
+	$categories = data.categories;
 
 	onMount(() => {
 		const urlParams = new URLSearchParams(window.location.search);
-    $wishListFilter = urlParams.get('showWishList') === 'true';
+		$wishListFilter = urlParams.get('showWishList') === 'true';
 	});
 </script>
 
@@ -29,7 +30,7 @@
 				<CategoryChooserView />
 				<WishListButtonView />
 			</div>
-			<TextInput bind:value={$searchFilter} placeholder={$t('Input.Search')} />
+				<SearchInputView />
 		</div>
 		<div class="mb-8">
 			{#if $filteredThings.length > 0}