somehow created a search bar

5 files changed, 81 insertions, 4 deletions

diff --git a/src/components/App.tsx b/src/components/App.tsx
index f7e0348..40b38f4 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -12,9 +12,11 @@ import { BrowserRouter, Route, Switch } from "react-router-dom";
 import Header from "./Header/Header";
 import HomePage from "./Pages/HomePage";
 import BillingPage from "./Pages/BillingPage";
+import SearchBar from "./Util/SearchBar";
 
 const App: React.FC = () => (
   <>
+    <SearchBar/>
     <BrowserRouter>
       <Header/>
       <div className={"root-content"}>
diff --git a/src/components/Form/Items/RegisterItemForm.tsx b/src/components/Form/Items/RegisterItemForm.tsx
index 7e9f67b..4089084 100644
--- a/src/components/Form/Items/RegisterItemForm.tsx
+++ b/src/components/Form/Items/RegisterItemForm.tsx
@@ -6,9 +6,6 @@
  * Copyright (c) 2021 Vidhu Kant Sharma
 */
 
-// TODO: Code isn't tested properly
-// I'd be surprised if it < 10 bugs
-
 import React, { useState, Dispatch, SetStateAction } from "react";
 import "./../Form.scss";
 import { NewItem } from "./../../../interfaces"
diff --git a/src/components/Form/People/RegisterPersonForm.tsx b/src/components/Form/People/RegisterPersonForm.tsx
index 3922975..dedc45a 100644
--- a/src/components/Form/People/RegisterPersonForm.tsx
+++ b/src/components/Form/People/RegisterPersonForm.tsx
@@ -8,7 +8,7 @@
 
 import React, { useState } from "react";
 import "./../Form.scss";
-import { Person, Address } from "./../../../interfaces"
+import { Person } from "./../../../interfaces"
 import axios from "axios";
 
 interface props {
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;