ASC-66

src/App.tsx

@@ -8,6 +8,7 @@ import {
 import ButtonTestRoute from "@/routes/ButtonTestRoute";
 import ProfilePictureTest from "./routes/ProfilePictureTestRoute";
 import Test from "./routes/Test";
+import SearchBarTest from "./routes/SearchBarTestRoute";
 import DropdownItem from "@/components/DropdownItem";
 import SortDropdownListTestRoute from "@/routes/SortDropdownListTestRoute";
 import NavigationTest from "@/routes/NavigationTest";
@@ -23,6 +24,10 @@ const router = createBrowserRouter([
     path: "/test",
     element: <Test />,
   },
+  {
+    path:"/SearchBarTestRoute",
+    element: <SearchBarTest />
+  },
   {
     path: "/testButton",
     element: <ButtonTestRoute />,

src/components/SearchBar.tsx

@@ -0,0 +1,34 @@
+import {useState, useRef} from "react";
+import { MagnifyingGlass } from "@phosphor-icons/react";
+
+export interface SearchBarProps {
+    target: string;
+  }
+
+
+  function SearchBar({ target }: SearchBarProps) {   
+    // const input = useRef<HTMLDivElement>(null);
+    const [query,setQuery] = useState("")
+
+
+    const handleClick = () => {
+        //handle query
+        //redirect to results
+        console.log(query)
+    }
+
+    return <div className={"h-[2.5em] flex flex-row m-[1em]"}>
+            <input 
+                value={query}
+                placeholder={"Search by " + target}  
+                className={"p-[0.5em] rounded-l-lg border  w-[20em]"} 
+                onChange={e => setQuery(e.target.value)}
+            />
+            <button className={"rounded-r-lg bg-primary-main p-[0.5em] hover:bg-primary-light cursor-pointer"} onClick={handleClick} >
+                <MagnifyingGlass color="white" size={"1em"} />
+            </button>
+    </div>;
+  }
+
+  export default SearchBar;
+

src/routes/SearchBarTestRoute.tsx

@@ -0,0 +1,12 @@
+import SearchBar from "../components/SearchBar";
+
+function SearchBarTest() {
+  return (
+    <div className="flex flex-col justify-center items-center min-h-screen">
+      <SearchBar target={"name"} />
+      <SearchBar target={"photo ID"} />
+    </div>
+  );
+}
+
+export default SearchBarTest;