qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-12-29 08:01:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ New search bar.

Browse Source
This commit is contained in:
pheralb
2023-12-12 13:12:07 +00:00
parent f4ce451502
commit 2b57fee182
1 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/search.svelte
+5 -4
View File
@@ -3,21 +3,21 @@
export let searchTerm: string; export let searchTerm: string;
export let placeholder: string = 'Search...'; export let placeholder: string = 'Search...';
export let clearSearch: () => void; export let clearSearch: () => void;
import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
import X from 'phosphor-svelte/lib/X'; import X from 'phosphor-svelte/lib/X';
</script> </script>
<div class="relative w-full"> <div class="sticky top-[63px] z-50">
<div class="relative w-full text-lg">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500"> <div class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
<div class="pointer-events-none"> <div class="pointer-events-none">
<SearchIcon size={18} strokeWidth={searchTerm ? 2.5 : 1.5} /> <SearchIcon size={20} strokeWidth={searchTerm ? 2.5 : 1.5} />
</div> </div>
</div> </div>
<input <input
type="text" type="text"
{placeholder} {placeholder}
autocomplete="off" autocomplete="off"
class="w-full rounded-md border border-neutral-300 bg-neutral-200/50 p-3 pl-10 placeholder-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-300 dark:border-neutral-800 dark:bg-neutral-700/10 dark:focus:ring-neutral-700" class="w-full border-b border-neutral-300 bg-neutral-100 p-3 pl-11 placeholder-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-300 dark:border-neutral-800 dark:bg-neutral-900 dark:focus:ring-neutral-700"
bind:value={searchTerm} bind:value={searchTerm}
on:input on:input
/> />
@@ -32,4 +32,5 @@
</button> </button>
</div> </div>
{/if} {/if}
</div>
</div> </div>