public
anord
read
Ledger
Why work hard when you can work easier?
Languages
Repository composition by tracked source files.
TypeScript
86%
CSS
10%
SQL
3%
Shell
1%
HTML
0%
Trace
apps/web/src/components/SearchBar.tsx
Trace helps you understand code history line by line. See who changed each line, when it changed, and which commit introduced it.
Author
Date
Commit
Line
Code
1
import { FormEvent, useState } from "react";
2
import { Icon } from "./Icon";
4
export function SearchBar({
5
initialQuery = "",
6
onSearch,
7
placeholder = "Search documentation",
8
compact = false
9
}: {
10
initialQuery?: string;
11
onSearch: (query: string) => void;
12
placeholder?: string;
13
compact?: boolean;
14
}) {
15
const [query, setQuery] = useState(initialQuery);
17
function handleSubmit(event: FormEvent) {
18
event.preventDefault();
19
onSearch(query);
20
}
22
return (
23
<form className={`search-bar${compact ? " search-bar-compact" : ""}`} onSubmit={handleSubmit}>
24
<span className="search-bar__icon">
25
<Icon name="search" className="icon" />
26
</span>
27
<input
28
value={query}
29
onChange={(event) => setQuery(event.target.value)}
30
placeholder={placeholder}
31
aria-label={placeholder}
32
/>
33
<button type="submit" className="search-bar__submit">{compact ? "Go" : "Search"}</button>
34
</form>
35
);
36
}