32 lines
966 B
TypeScript
32 lines
966 B
TypeScript
|
import { InputAdornment, TextField } from "@material-ui/core";
|
||
|
|
import { SearchIcon } from "@saleor/macaw-ui";
|
||
|
|
import { ChangeEvent } from "react";
|
||
|
|
import { useSearchBox } from "react-instantsearch-hooks-web";
|
||
|
|
import styles from "../styles/search.module.css";
|
||
|
|
|
||
|
|
export function SearchBox() {
|
||
|
|
const { query, refine } = useSearchBox();
|
||
|
|
|
||
|
|
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||
|
|
refine(e.target.value);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<div className={styles.textFieldContainer}>
|
||
|
|
<TextField
|
||
|
|
fullWidth
|
||
|
|
InputProps={{
|
||
|
|
startAdornment: (
|
||
|
|
<InputAdornment position="start">
|
||
|
|
<SearchIcon />
|
||
|
|
</InputAdornment>
|
||
|
|
),
|
||
|
|
}}
|
||
|
|
value={query}
|
||
|
|
onChange={handleChange}
|
||
|
|
placeholder={"Search products..."}
|
||
|
|
inputProps={{ style: { padding: "16px" } }}
|
||
|
|
className={styles.textField}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|