From 3bec88dd96c639518ac28fd3bbbaaf2e7048c4b3 Mon Sep 17 00:00:00 2001
From: Shanemel Asuncion <shanemelasuncion@gmail.com>
Date: Fri, 1 Mar 2024 15:13:58 -0700
Subject: [PATCH] Searchbar

---
 src/App.tsx                       |  5 +++++
 src/components/SearchBar.tsx      | 34 +++++++++++++++++++++++++++++++
 src/routes/SearchBarTestRoute.tsx | 12 +++++++++++
 3 files changed, 51 insertions(+)
 create mode 100644 src/components/SearchBar.tsx
 create mode 100644 src/routes/SearchBarTestRoute.tsx

diff --git a/src/App.tsx b/src/App.tsx
index f4c4162..4fd9847 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import {
   RouterProvider,
 } from "react-router-dom";
 import Test from "./routes/Test";
+import SearchBarTest from "./routes/SearchBarTestRoute";
 
 const router = createBrowserRouter([
   {
@@ -13,6 +14,10 @@ const router = createBrowserRouter([
     path: "/test",
     element: <Test />,
   },
+  {
+    path:"/SearchBarTestRoute",
+    element: <SearchBarTest />
+  }
 ]);
 
 function App() {
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
new file mode 100644
index 0000000..d317464
--- /dev/null
+++ b/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;
+  
\ No newline at end of file
diff --git a/src/routes/SearchBarTestRoute.tsx b/src/routes/SearchBarTestRoute.tsx
new file mode 100644
index 0000000..8daeca4
--- /dev/null
+++ b/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;