1 files changed, 56 insertions, 0 deletions
diff --git a/ui/src/components/HistorySearch.tsx b/ui/src/components/HistorySearch.tsx
new file mode 100644
index 00000000..08bed2a8
--- /dev/null
+++ b/ui/src/components/HistorySearch.tsx
@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { ArrowPathIcon } from "@heroicons/react/24/outline";
+import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
+
+interface HistorySearchProps {
+  refresh: (query: string) => void;
+}
+
+export default function HistorySearch(props: HistorySearchProps) {
+  let [searchQuery, setSearchQuery] = useState("");
+
+  return (
+    <div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
+      <form
+        className="relative flex flex-1"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <label htmlFor="search-field" className="sr-only">
+          Search
+        </label>
+        <MagnifyingGlassIcon
+          className="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400"
+          aria-hidden="true"
+        />
+        <input
+          id="search-field"
+          className="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
+          placeholder="Search..."
+          autoComplete="off"
+          autoCapitalize="off"
+          autoCorrect="off"
+          spellCheck="false"
+          type="search"
+          name="search"
+          onChange={(query) => {
+            setSearchQuery(query.target.value);
+            props.refresh(query.target.value);
+          }}
+        />
+      </form>
+      <div className="flex items-center gap-x-4 lg:gap-x-6">
+        <button
+          type="button"
+          className="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500"
+          onClick={() => {
+            props.refresh(searchQuery);
+          }}
+        >
+          <ArrowPathIcon className="h-6 w-6" aria-hidden="true" />
+        </button>
+      </div>
+    </div>
+  );
+}