1 files changed, 40 insertions, 0 deletions
diff --git a/bs5/universal/native/shared/SearchField.re b/bs5/universal/native/shared/SearchField.re
new file mode 100644
index 0000000..5ab888d
--- /dev/null
+++ b/bs5/universal/native/shared/SearchField.re
@@ -0,0 +1,40 @@
+[@warning "-26-27"];
+
+open Melange_json.Primitives;
+
+[@react.client.component]
+let make = (~searchText: string, ~selectedId: option(int), ~isEditing: bool) => {
+  let {navigate, _}: ClientRouter.t = ClientRouter.useRouter();
+  let (text, setText) = RR.useStateValue(searchText);
+  let (isSearching, startSearching) = React.useTransition();
+
+  let onSubmit = event => {
+    React.Event.Form.preventDefault(event);
+  };
+
+  let%browser_only onChange = event => {
+    let target = React.Event.Form.target(event);
+    let nextText = target##value;
+    setText(nextText);
+    startSearching(() =>
+      navigate({
+        searchText: Some(nextText),
+        selectedId,
+        isEditing,
+      })
+    );
+  };
+
+  <form className="search" role="search" onSubmit>
+    <label className="offscreen mr-4" htmlFor="sidebar-search-input">
+      <Text> "Search for a note by title" </Text>
+    </label>
+    <InputText
+      id="sidebar-search-input"
+      placeholder="Search"
+      value=text
+      onChange
+    />
+    <Spinner active=isSearching />
+  </form>;
+};