REFACTOR: Repositioning of Components in Project Structure

frontend/src/components/Input/Button.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+interface ButtonProps {
+  type?: "button" | "submit" | "reset";
+  extraClasses?: string;
+  children?: React.ReactNode;
+  onClick?: () => void;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  type = "button",
+  children = "Submit",
+  extraClasses = "",
+  onClick,
+}) => {
+  return (
+    <button
+      type={type}
+      className={`${extraClasses} p-2 text-[1.5rem] text-white hover:text-purple-600 bg-black/30 hover:bg-black/80 rounded-md border border-gray-300 hover:border-purple-500 hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all`}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};
+
+interface ToggleButtonProps extends ButtonProps {
+  toggled?: boolean;
+}
+
+export const ToggleButton: React.FC<ToggleButtonProps> = ({
+  children = "Toggle",
+  extraClasses = "",
+  onClick,
+  toggled = false
+}) => {
+  toggled
+    ? (extraClasses += " cursor-default bg-purple-600")
+    : (extraClasses +=
+        " cursor-pointer hover:text-purple-600 hover:bg-black/80 hover:border-purple-500 hover:border-b-4 hover:border-l-4");
+  return (
+    <div>
+      <button
+        className={`${extraClasses} p-2 text-[1.5rem] text-white bg-black/30 rounded-[1rem] border border-gray-300 transition-all`}
+        onClick={onClick}
+      >
+        {children}
+      </button>
+    </div>
+  );
+};
+
+export default Button;

frontend/src/components/Input/Input.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  extraClasses?: string;
+  children?: React.ReactNode;
+}
+
+const Input: React.FC<InputProps> = ({
+  name,
+  type = "text",
+  placeholder = "",
+  value = "",
+  extraClasses = "",
+  onChange = () => { },
+  onKeyDown = () => { },
+  children,
+  ...props // all other HTML input props
+}) => {
+  return (
+    <>
+    <div className="flex flex-col items-center">
+      <input
+        name={name}
+        type={type}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+        {...props}
+        className={`${extraClasses} relative p-2 rounded-[1rem] w-[20vw] focus:w-[21vw] bg-black/40 border border-gray-300 focus:border-purple-500 focus:outline-purple-500 text-center text-white text-xl transition-all`}
+      />
+
+    </div>
+    </>
+    
+  );
+};
+
+export default Input;

frontend/src/components/Input/SearchBar.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import Input from "./Input";
+import { Search as SearchIcon } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
+const SearchBar: React.FC = () => {
+  const [searchQuery, setSearchQuery] = useState("");
+  //const [debouncedQuery, setDebouncedQuery] = useState(searchQuery);
+  const navigate = useNavigate();
+
+  // Debounce the search query
+  {/*
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedQuery(searchQuery);
+    }, 500); // Wait 500ms after user stops typing
+
+    return () => clearTimeout(timer);
+  }, [searchQuery]); */}
+
+  // Perform search when debounced query changes
+  const handleSearch = async () => {
+    if (!searchQuery.trim()) return;
+
+    try {
+      const response = await fetch("/api/search", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ query: searchQuery }), // <-- Fixed payload
+      });
+
+      const data = await response.json();
+      console.log("Search results:", data);
+
+      navigate("/results", { state: { searchResults: data, query: searchQuery } });
+
+      // Handle the search results here
+    } catch (error) {
+      console.error("Error performing search:", error);
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      console.log("Key pressed:", e.key); // Debugging
+
+      e.preventDefault(); // Prevent unintended form submission
+      handleSearch(); // Trigger search when Enter key is pressed
+    }
+  };
+
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleSearch();
+    }
+  };
+
+  return (
+    <div id="search-bar" className="flex items-center">
+      <Input
+        type="text"
+        placeholder="Search..."
+        value={searchQuery}
+        onChange={handleSearchChange}
+        onKeyDown={handleKeyPress}
+        extraClasses="pr-[30px] focus:outline-none focus:border-purple-500 focus:w-[30vw]"
+      />
+
+      
+
+      <SearchIcon className="-translate-x-[28px] top-1/2 h-6 w-6 text-white" />
+    </div>
+  );
+};
+
+export default SearchBar;