33 lines
780 B
TypeScript
33 lines
780 B
TypeScript
interface Props {
|
|
value: string;
|
|
onChange: (v: string) => void;
|
|
placeholder: string;
|
|
}
|
|
|
|
export const QueryForm: React.FC<Props> = ({
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
}) => {
|
|
const handleInputChange = (event) => {
|
|
event.preventDefault();
|
|
onChange(event.target.value); // In this case, the query, e.g. "COVID.19"
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={(e) => e.preventDefault()} className="w-full">
|
|
<input
|
|
className="w-full text-gray-700 rounded-md border-gray-300 focus:outline-none focus:shadow-outline"
|
|
autoFocus
|
|
type="text"
|
|
value={value}
|
|
onChange={handleInputChange}
|
|
name="query"
|
|
id="query"
|
|
placeholder={placeholder}
|
|
onSubmit={(e) => e.preventDefault()}
|
|
/>
|
|
</form>
|
|
);
|
|
};
|