// import "./Searchbar.css";
// // // import "./ClearButton.jsx";
// import clear from "../../images/clear.png";
// export function Searchbar(props) {
// const handleChange = (e) => {
// props.setQuery(e.target.value.toLowerCase());
// //props.setQuery({ query: `${e.target.value.toLowerCase()}` });
// };
// const handleSubmit = (e) => {
// e.preventDefault();
// props.fetchRecipes();
// };
// // return (
// // <div>
// // <form onSubmit={handleSubmit} className="search-container">
// // <input
// // onChange={handleChange}
// // className="inputbar"
// // type="text"
// // name="inputSearchBar"
// // placeholder="Search for a recipe"
// // ></input>
// // <button className="searchbutton" type="submit">
// // <p className="text-search">SEARCH</p>
// // </button>
// // </form>
// // <button className="clearbutton">
// // <img className="clear-img" src={clear}></img>
// // </button>
// // </div>
// // );
// return (
// <div className="searchbar-container">
// <form onSubmit={handleSubmit} className="search-container">
// <input
// onChange={handleChange}
// className="inputbar"
// type="text"
// name="inputSearchBar"
// placeholder="Search for a recipe"
// />
// <button className="searchbutton" type="submit">
// <p className="text-search">SEARCH</p>
// </button>
// </form>
// <div className="clearbutton">
// <img className="clear-img" src={clear} alt="Clear Button" />
// </div>
// </div>
// );
// }
// export default Searchbar;
import "./Searchbar.css";
import clear from "../../images/clear.png";
export function Searchbar(props) {
const handleChange = (e) => {
props.setQuery(e.target.value.toLowerCase());
};
const handleSubmit = (e) => {
e.preventDefault();
props.fetchRecipes();
};
return (
<div className="searchbar-container">
<form onSubmit={handleSubmit} className="search-container">
<input
onChange={handleChange}
className="inputbar"
type="text"
name="inputSearchBar"
placeholder="Search for a recipe"
/>
<button className="searchbutton" type="submit">
<p className="text-search">SEARCH</p>
</button>
</form>
<button className="clearbutton">
<img className="clear-img" src={clear} alt="Clear Button" />
</button>
</div>
);
}
export default Searchbar;