126 lines
5.8 KiB
Plaintext
126 lines
5.8 KiB
Plaintext
component PublicSearch {
|
|
props {
|
|
class: string = ""
|
|
query = ""
|
|
|
|
placeholder = "Search..."
|
|
label = "Search"
|
|
|
|
action = ""
|
|
method = "get"
|
|
name = "q"
|
|
|
|
buttonLabel = ""
|
|
clearLabel = "Clear search"
|
|
|
|
size = "default"
|
|
centered = false
|
|
fullWidth = false
|
|
|
|
showShortcut = false
|
|
shortcutLabel = "⌘ K"
|
|
|
|
suggestions = []
|
|
}
|
|
|
|
state searchValue = query
|
|
state focused = false
|
|
|
|
view {
|
|
<div
|
|
class="w-full {class}"
|
|
class:max-w-2xl="!fullWidth"
|
|
class:mx-auto="centered"
|
|
>
|
|
<form
|
|
action="{action}"
|
|
method="{method}"
|
|
role="search"
|
|
class="w-full"
|
|
>
|
|
<label
|
|
for="public-search-input"
|
|
class="sr-only"
|
|
>
|
|
{label}
|
|
</label>
|
|
|
|
<div
|
|
class=" group relative flex w-full items-center rounded-2xl border bg-white shadow-sm transition-all duration-200 dark:bg-white/5 {focused ? 'border-indigo-400 ring-4 ring-indigo-500/10 dark:border-indigo-500/50 dark:ring-indigo-500/10' : 'border-slate-200 hover:border-slate-300 dark:border-white/10 dark:hover:border-white/20' } {size === 'compact' ? 'min-h-11' : size === 'large' ? 'min-h-14' : 'min-h-12' } "
|
|
>
|
|
<!-- Search icon -->
|
|
<span class=" pointer-events-none absolute left-4 text-slate-400 transition group-focus-within:text-indigo-600 dark:text-slate-500 dark:group-focus-within:text-indigo-400 {size === 'large' ? 'h-5 w-5' : 'h-4.5 w-4.5'} icon-[lucide--search] " aria-hidden="true" ></span>
|
|
|
|
<!-- Input -->
|
|
<input
|
|
id="public-search-input"
|
|
type="search"
|
|
name="{name}"
|
|
value="{searchValue}"
|
|
placeholder="{placeholder}"
|
|
autocomplete="off"
|
|
@input="searchValue = event.target.value"
|
|
@focus="focused = true"
|
|
@blur="focused = false"
|
|
class=" min-w-0 flex-1 bg-transparent text-slate-950 outline-none placeholder:text-slate-400 dark:text-white dark:placeholder:text-slate-500 {size === 'compact' ? 'h-11 pl-11 pr-3 text-sm' : size === 'large' ? 'h-14 pl-12 pr-4 text-base' : 'h-12 pl-11 pr-4 text-sm' } "
|
|
/>
|
|
|
|
<!-- Keyboard shortcut -->
|
|
<span
|
|
class="mr-3 hidden shrink-0 items-center rounded-md border border-slate-200 bg-slate-50 px-2 py-1 text-[11px] font-semibold text-slate-400 dark:border-white/10 dark:bg-white/5 dark:text-slate-500 sm:inline-flex"
|
|
class:hidden="!showShortcut || searchValue !== ''"
|
|
>
|
|
{shortcutLabel}
|
|
</span>
|
|
|
|
<!-- Clear button -->
|
|
<button
|
|
type="button"
|
|
@click="searchValue = ''"
|
|
aria-label="{clearLabel}"
|
|
class="mr-2 grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-500 dark:hover:bg-white/10 dark:hover:text-slate-200"
|
|
class:hidden="searchValue === ''"
|
|
>
|
|
<span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" ></span>
|
|
</button>
|
|
|
|
<!-- Submit button -->
|
|
<button
|
|
type="submit"
|
|
class=" mr-1.5 shrink-0 items-center justify-center gap-2 rounded-xl bg-indigo-600 font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900 {size === 'compact' ? 'h-9 px-3 text-xs' : size === 'large' ? 'h-11 px-5 text-sm' : 'h-10 px-4 text-sm' } "
|
|
class:hidden="buttonLabel === ''"
|
|
class:inline-flex="buttonLabel !== ''"
|
|
>
|
|
{buttonLabel}
|
|
|
|
<span class="icon-[lucide--arrow-right] h-4 w-4" aria-hidden="true" ></span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Suggested searches -->
|
|
<div
|
|
class="mt-4 flex flex-wrap items-center gap-2"
|
|
class:hidden="suggestions.length === 0"
|
|
class:justify-center="centered"
|
|
class:justify-start="!centered"
|
|
>
|
|
<span class="mr-1 text-xs font-medium text-slate-500 dark:text-slate-400">
|
|
Popular:
|
|
</span>
|
|
|
|
{#each suggestions.slice(0, 5) as suggestion}
|
|
<a
|
|
href="{suggestion.href}"
|
|
class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-300 dark:hover:border-indigo-500/30 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-300"
|
|
>
|
|
<span class="{suggestion.iconClass} h-3.5 w-3.5" aria-hidden="true" class:hidden="suggestion.iconClass === ''" ></span>
|
|
|
|
{suggestion.label}
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|