Untitled
unknown
plain_text
7 months ago
2.7 kB
1
Indexable
Never
// 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;