Update SearchBar.jsx

src/components/SearchBar.jsx

@@ -1,33 +1,3 @@
-// import { useState } from "react";
-// import { FaSearch } from "react-icons/fa";
-// import { useNavigate } from "react-router-dom";
-
-// export default function SearchBar() {
-//   const [query, setQuery] = useState("");
-//   const navigate = useNavigate();
-
-//   const handleSubmit = (e) => {
-//     e.preventDefault();
-//     if (query.trim()) {
-//       navigate(`/search/${query.trim()}`);
-//     }
-//   };
-
-//   return (
-//     <form onSubmit={handleSubmit} className="flex items-center gap-2">
-//       <input
-//         type="text"
-//         placeholder="Search"
-//         value={query}
-//         onChange={(e) => setQuery(e.target.value)}
-//         className="px-3 py-2 rounded-md focus:outline-none focus:ring focus:border-blue-600 flex-1"
-//       />
-//       <button type="submit" className="px-4 py-2 bg-blue-600 text-black rounded-md">
-//         <FaSearch />
-//       </button>
-//     </form>
-//   );
-// }
 import { useState } from "react";
 import { FaSearch } from "react-icons/fa";
 import { useNavigate } from "react-router-dom";
@@ -50,12 +20,12 @@ export default function SearchBar() {
         placeholder="Search"
         value={query}
         onChange={(e) => setQuery(e.target.value)}
-        className="px-3 py-2 rounded-md focus:outline-none focus:ring focus:border-blue-600 flex-1 text-black bg-white" // Ensure text-black and bg-white
-        style={{ color: "black" }} // Inline style fallback for ensuring visibility
+        className="px-3 py-2 rounded-md focus:outline-none focus:ring focus:border-blue-600 flex-1"
       />
-      <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-md">
+      <button type="submit" className="px-4 py-2 bg-blue-600 text-black rounded-md">
         <FaSearch />
       </button>
     </form>
   );
 }
+