desertthunder.dev
learn and share notes on atproto (wip) 馃
malfestio.stormlightlabs.org/
readability
solid
axum
atproto
srs
1import { useNavigate } from "@solidjs/router";
2import clsx from "clsx";
3import type { Component } from "solid-js";
4import { createSignal } from "solid-js";
5
6interface SearchInputProps {
7 class?: string;
8 initialQuery?: string;
9}
10
11export const SearchInput: Component<SearchInputProps> = (props) => {
12 const [query, setQuery] = createSignal(props.initialQuery || "");
13 const navigate = useNavigate();
14
15 const handleSearch = (e: Event) => {
16 e.preventDefault();
17 if (query().trim()) {
18 navigate(`/search?q=${encodeURIComponent(query())}`);
19 }
20 };
21
22 return (
23 <form onSubmit={handleSearch} class={clsx("relative", props.class)}>
24 <div class="relative">
25 <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
26 <div class="i-bi-search text-gray-400" />
27 </div>
28 <input
29 type="search"
30 class="block w-full p-2 pl-10 text-sm border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
31 placeholder="Search decks, cards..."
32 value={query()}
33 onInput={(e) => setQuery(e.currentTarget.value)} />
34 </div>
35 </form>
36 );
37};