personal web client for Bluesky
mary.my.id
typescript
solidjs
bluesky
atcute
1import { autofocusIfEnabled, modelText } from '~/lib/input-refs';
2
3import MagnifyingGlassOutlinedIcon from './icons-central/magnifying-glass-outline';
4
5export interface SearchInputProps {
6 value: string;
7 onChange: (next: string) => void;
8 placeholder?: string;
9 autofocus?: boolean;
10}
11
12const SearchInput = (props: SearchInputProps) => {
13 return (
14 <div class="relative h-max grow">
15 <div class="pointer-events-none absolute inset-y-0 ml-px grid w-10 place-items-center">
16 <MagnifyingGlassOutlinedIcon class="text-lg text-contrast-muted" />
17 </div>
18
19 <input
20 ref={(node) => {
21 modelText(node, () => props.value, props.onChange);
22
23 if ('autofocus' in props) {
24 autofocusIfEnabled(node, () => props.autofocus ?? false);
25 }
26 }}
27 type="text"
28 placeholder={props.placeholder ?? `Search`}
29 class="h-10 w-full rounded-full border border-outline-md bg-background px-3 pl-10 text-sm text-contrast outline-2 -outline-offset-2 outline-accent placeholder:text-contrast-muted focus:outline"
30 />
31 </div>
32 );
33};
34
35export default SearchInput;