somehow created a search bar

2 files changed, 78 insertions, 0 deletions

diff --git a/src/components/Util/SearchBar.scss b/src/components/Util/SearchBar.scss
new file mode 100644
index 0000000..d08f1ac
--- /dev/null
+++ b/src/components/Util/SearchBar.scss
@@ -0,0 +1,28 @@
+@import "../../styles/theme";
+
+.searchBar input {
+  width: 12rem;
+}
+
+.searchResults {
+  margin-top: $fontSize1;
+  width: 12rem;
+  height: 10rem;
+  background-color: $background3;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border: 1px solid $border2;
+}
+
+.searchResult {
+  color: $defFG;
+}
+
+.searchResults .dataItem {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  color: black;
+}
+
diff --git a/src/components/Util/SearchBar.tsx b/src/components/Util/SearchBar.tsx
new file mode 100644
index 0000000..d26415b
--- /dev/null
+++ b/src/components/Util/SearchBar.tsx
@@ -0,0 +1,50 @@
+/*
+ * OpenBills - Self hosted browser app to generate and keep track of simple invoices
+ * Version - 0
+ * Licensed under the MIT license - https://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2021 Vidhu Kant Sharma
+*/
+
+import React, { useState } from "react";
+import "./SearchBar.scss";
+
+const SearchBar: React.FC = () => {
+  const sampledata: string[] = ["one", "two", "three", "four", "five", "six"]
+
+  const [searchValue, setSearchValue] = useState<string>("");
+  const [searchSelection, setSearchSelection] = useState<string>("");
+
+  const setSelectionValue = (value: string) => {
+    setSearchValue("");
+    setSearchSelection(value);
+    console.log(searchSelection);
+  }
+
+  return (
+    <div className="searchBar">
+      <div className="searchBarInput">
+        <input 
+          type="text" 
+          value={searchValue}
+          onChange={
+            (event) => {
+              setSearchValue(event.target.value);
+              console.log(searchSelection);
+            }
+          }
+        />
+      </div>
+
+      <div className="searchResults">
+        {
+          searchValue === "" 
+            || sampledata.map((i) => i.toLowerCase().includes(searchValue.toLowerCase()) 
+              && (<p key={i} className={"searchResult"} onClick={() => setSelectionValue(i)}>{i}</p>))
+        }
+      </div>
+    </div>
+  );
+}
+
+export default SearchBar;