/
Search.tsx
49 lines (44 loc) · 1.12 KB
/
Search.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import React from 'react';
import { SearchForm } from './private/components/Form';
import { SearchInput, SearchInputIcon } from './private/components/Input';
import { SearchResults } from './private/components/SearchResults';
interface Result {
title: JSX.Element;
items?: [JSX.Element];
}
export type SearchProps = {
onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
query?: string;
results?: [Result];
loadingMessage?: JSX.Element;
placeholder?: string;
} & React.InputHTMLAttributes<HTMLInputElement>;
const Search: React.FC<SearchProps> = ({
query,
placeholder,
onSubmit,
onChange,
results,
loadingMessage,
...props
}) => {
return (
<SearchForm onSubmit={onSubmit}>
<SearchInput
value={query}
placeholder={placeholder}
type="text"
autoComplete="off"
required
onChange={onChange}
{...props}
/>
<SearchInputIcon />
{(results || loadingMessage) && (
<SearchResults loadingMessage={loadingMessage} results={results} />
)}
<input type="submit" hidden />
</SearchForm>
);
};
export default Search;