Untitled

// 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;