46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
import React, { useState } from 'react'
|
|
import PropTypes from 'prop-types';
|
|
|
|
/**
|
|
* Search component form that can be customized with change and submit handlers
|
|
* @param {object} props
|
|
* {
|
|
* handleChange: A form input change event handler. This function is executed when the
|
|
* search input or order by input changes.
|
|
* handleSubmit: A form submit event handler. This function is executed when the
|
|
* search form is submitted.
|
|
* }
|
|
* @returns
|
|
*/
|
|
const Form = ({ handleSubmit }) => {
|
|
const [searchQuery, setSearchQuery] = useState("")
|
|
return (
|
|
<form onSubmit={(e) => e.preventDefault()} className="items-center">
|
|
<div className="flex">
|
|
<input
|
|
type="text"
|
|
name="search#q"
|
|
value={searchQuery}
|
|
onChange={(e) => { setSearchQuery(e.target.value) }}
|
|
placeholder="Search"
|
|
aria-label="Search"
|
|
className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
|
|
/>
|
|
<button
|
|
onClick={() => handleSubmit(searchQuery)}
|
|
type="button"
|
|
className="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
|
|
>
|
|
Search
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
Form.propTypes = {
|
|
handleSubmit: PropTypes.func.isRequired
|
|
}
|
|
|
|
export default Form;
|