Update SearchBar.jsx

src/components/SearchBar.jsx

@@ -1,3 +1,33 @@
+// 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";
@@ -20,9 +50,9 @@ 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"
+        className="px-3 py-2 rounded-md focus:outline-none focus:ring focus:border-blue-600 flex-1 text-black" // Added text-black
       />
-      <button type="submit" className="px-4 py-2 bg-blue-600 text-black rounded-md">
+      <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-md">
         <FaSearch />
       </button>
     </form>