added back search button to click and do something

Author: abhitrueprogrammer

src/components/searchbar.tsx

@@ -3,12 +3,12 @@
 import { useState, useCallback, useRef, useEffect } from "react";
 import axios, { AxiosError } from "axios";
 import { Search } from "lucide-react";
-import debounce from 'debounce';
-import { useRouter } from "next/navigation";  
+import debounce from "debounce";
+import { useRouter } from "next/navigation";
 import { Input } from "@/components/ui/input";
 
-function SearchBar () {
-  const router = useRouter();  
+function SearchBar() {
+  const router = useRouter();
   const [searchText, setSearchText] = useState("");
   const [suggestions, setSuggestions] = useState<string[]>([]);
   const [error, setError] = useState<string | null>(null);
@@ -25,12 +25,15 @@ function SearchBar () {
           });
 
           const { subjects } = searchResponse.data;
-          const suggestionList = subjects.map((subjectObj: { subject: string }) => subjectObj.subject);
+          const suggestionList = subjects.map(
+            (subjectObj: { subject: string }) => subjectObj.subject,
+          );
           setSuggestions(suggestionList);
           setError(null);
         } catch (error) {
           const typedError = error as AxiosError<{ message?: string }>;
-          const errorMessage = typedError.response?.data?.message ?? "Error fetching suggestions";
+          const errorMessage =
+            typedError.response?.data?.message ?? "Error fetching suggestions";
           setError(errorMessage);
         } finally {
           setLoading(false);
@@ -39,7 +42,7 @@ function SearchBar () {
         setSuggestions([]);
       }
     }, 500),
-    []
+    [],
   );
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -48,7 +51,7 @@ function SearchBar () {
     if (text.length <= 1) {
       setSuggestions([]);
     }
-    debouncedSearch(text); 
+    debouncedSearch(text);
   };
 
   const handleSelectSuggestion = async (suggestion: string) => {
@@ -58,7 +61,10 @@ function SearchBar () {
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (suggestionsRef.current && !suggestionsRef.current.contains(event.target as Node)) {
+    if (
+      suggestionsRef.current &&
+      !suggestionsRef.current.contains(event.target as Node)
+    ) {
       setSuggestions([]);
     }
   };
@@ -75,38 +81,52 @@ function SearchBar () {
       <form className="w-full max-w-xl">
         <div className="relative">
           <Input
-            type="text" 
-            value={searchText} 
+            type="text"
+            value={searchText}
             onChange={handleSearchChange}
-            placeholder="Search..." 
-            className={`w-full rounded-xl border px-4 py-6 pr-10 bg-[#7480FF] placeholder:text-white text-white opacity-50 shadow-sm focus:outline-none focus:ring-2 ${loading ? 'opacity-70' : ''}`}
+            placeholder="Search..."
+            className={`w-full rounded-xl border bg-[#7480FF] px-4 py-6 pr-10 text-white opacity-50 shadow-sm placeholder:text-white focus:outline-none focus:ring-2 ${loading ? "opacity-70" : ""}`}
           />
-          <button type="submit" className="absolute inset-y-0 right-0 flex items-center pr-3" disabled>  {/* disabled={loading} */}
+          <button
+            type="submit"
+            className="absolute inset-y-0 right-0 flex items-center pr-3"
+            disabled={loading}
+          >
+            {" "}
+            {/* disabled={loading} replace with disabled */} 
             <Search className="h-5 w-5 text-white opacity-50" />
           </button>
-        {loading && (
-          <div className="absolute z-20 w-full max-w-xl border bg-white border-[#7480FF] dark:bg-[#030712] rounded-md mt-2 p-2 text-center">
-            Loading suggestions...
-          </div>
-        )}
-        {(suggestions.length > 0 || error) && !loading && (
-          <ul ref={suggestionsRef} className="absolute mx-0.5 md:mx-0 w-full text-center max-w-xl z-20 border bg-white border-[#7480FF] dark:bg-[#030712] rounded-md mt-2">
-            {error ? (
-              <li className="p-2 text-red">{error}</li>
-            ) : (
-              suggestions.map((suggestion, index) => (
-                <li 
-                  key={index} 
-                  onClick={() => handleSelectSuggestion(suggestion)} 
-                  className="cursor-pointer p-2 truncate hover:opacity-50"
-                  style={{ width: '100%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}
-                >
-                  {suggestion}
-                </li>
-              ))
-            )}
-          </ul>
-        )}
+          {loading && (
+            <div className="absolute z-20 mt-2 w-full max-w-xl rounded-md border border-[#7480FF] bg-white p-2 text-center dark:bg-[#030712]">
+              Loading suggestions...
+            </div>
+          )}
+          {(suggestions.length > 0 || error) && !loading && (
+            <ul
+              ref={suggestionsRef}
+              className="absolute z-20 mx-0.5 mt-2 w-full max-w-xl rounded-md border border-[#7480FF] bg-white text-center dark:bg-[#030712] md:mx-0"
+            >
+              {error ? (
+                <li className="text-red p-2">{error}</li>
+              ) : (
+                suggestions.map((suggestion, index) => (
+                  <li
+                    key={index}
+                    onClick={() => handleSelectSuggestion(suggestion)}
+                    className="cursor-pointer truncate p-2 hover:opacity-50"
+                    style={{
+                      width: "100%",
+                      overflow: "hidden",
+                      whiteSpace: "nowrap",
+                      textOverflow: "ellipsis",
+                    }}
+                  >
+                    {suggestion}
+                  </li>
+                ))
+              )}
+            </ul>
+          )}
         </div>
       </form>
     </div>