qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-03-12 16:10:34 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/search.svelte
View File

@ -3,33 +3,34 @@
export let searchTerm: string;
export let placeholder: string = 'Search...';
export let clearSearch: () => void;
import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
import X from 'phosphor-svelte/lib/X';
</script>
<div class="relative w-full">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
<div class="pointer-events-none">
<SearchIcon size={18} strokeWidth={searchTerm ? 2.5 : 1.5} />
<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="pointer-events-none">
<SearchIcon size={20} strokeWidth={searchTerm ? 2.5 : 1.5} />
</div>
</div>
<input
type="text"
{placeholder}
autocomplete="off"
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}
on:input
/>
{#if searchTerm.length > 0}
<div class="absolute inset-y-0 right-0 flex items-center pr-3">
<button
type="button"
class="focus:outline-none focus:ring-1 focus:ring-neutral-300"
on:click={clearSearch}
>
<X size={18} />
</button>
</div>
{/if}
</div>
<input
type="text"
{placeholder}
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"
bind:value={searchTerm}
on:input
/>
{#if searchTerm.length > 0}
<div class="absolute inset-y-0 right-0 flex items-center pr-3">
<button
type="button"
class="focus:outline-none focus:ring-1 focus:ring-neutral-300"
on:click={clearSearch}
>
<X size={18} />
</button>
</div>
{/if}
</div>