From d82913a45d610fc16201fc0df8a315c4bffcb150 Mon Sep 17 00:00:00 2001
From: "Andy Chan (12beesinatrenchcoat)" <andy@12beesinatrenchco.at>
Date: Sun, 31 Mar 2024 18:47:12 -0400
Subject: [PATCH] Add non-functional search bar

Does not do anything at the moment.
---
 compass/components/Table/TableAction.tsx | 42 +++++++++++++++++++-----
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/compass/components/Table/TableAction.tsx b/compass/components/Table/TableAction.tsx
index be4a309..f2a72a0 100644
--- a/compass/components/Table/TableAction.tsx
+++ b/compass/components/Table/TableAction.tsx
@@ -1,12 +1,36 @@
 import { MagnifyingGlassIcon } from "@heroicons/react/24/solid";
+import { useRef, useState } from "react";
 
 export const TableAction = () => {
-    return (
-      <div className="w-40 flex flex-row items-center justify-between text-xs font-medium text-gray-500 p-2">
-        <span>Filter</span>
-        <span>Sort</span>
-        <span className="w-4 h-4"><MagnifyingGlassIcon /></span>
-      </div>
-    );
-  };
-  
\ No newline at end of file
+  const searchInput = useRef<HTMLInputElement>(null);
+  const [searchActive, setSearchActive] = useState(false);
+  const activateSearch = () => {
+    setSearchActive(true);
+    if (searchInput.current === null) { return; }
+    searchInput.current.focus();
+    searchInput.current.addEventListener("focusout", () => {
+      if (searchInput.current?.value.trim() === "") {
+        searchInput.current.value = "";
+        deactivateSearch();
+      }
+    })
+  }
+
+  const deactivateSearch = () => setSearchActive(false);
+
+  return (
+    <div className="w-auto flex flex-row gap-x-0.5 items-center justify-between text-xs font-medium text-gray-500 p-2">
+      <span className="p-1 rounded hover:bg-gray-100">Filter</span>
+      <span className="p-1 rounded hover:bg-gray-100">Sort</span>
+      <span className="p-1 rounded hover:bg-gray-100" onClick={() => activateSearch()}>
+        <MagnifyingGlassIcon className="w-4 h-4 inline" />
+      </span>
+      <input
+        ref={searchInput}
+        className={"outline-none transition-all duration-300 " + (searchActive ? "w-48" : "w-0")}
+        type="text"
+        name="search"
+        placeholder="Type to search..." />
+    </div>
+  );
+};