another input textbox with selection but not completely same as wante…

…d, will require changes for merging with backend

src/App.js

@@ -2,6 +2,8 @@
 import './App.css';
 import DeriveCard from './deriveCard';
 import TextInput2 from './Components/TextInput2'
+import TextInputSelect from './Components/TextInputSelect';
+
 import Dropdown from './Components/DropdownButton/Dropdown';
 function App() {
   const options = [
@@ -196,15 +198,12 @@ const menuItems = [
      <DeriveCard/>
       <div className='flex flex-col'>
           <div>Text Input</div>
-          <div className='m-12'>
-            <TextInput2 options = {options}/>
-          </div>
-          <div className='m-12'>
-            <TextInput2 options = {options2}/>
+          <div className = "m-auto">
+            <TextInputSelect options = {options2}/>
           </div>
       </div>
           </main>
   );
 }
 
-export default App;
+export default App;

src/Components/TextInputSelect.jsx

@@ -0,0 +1,61 @@
+import { useState, useEffect, useRef } from 'react';
+import {FaRegWindowClose} from 'react-icons/fa'
+import './DropdownButton/scrollbar.css';
+let arrSelected = [];
+const TextInputSelect = ({ options }) => {
+    const [search, setSearch] = useState('');
+    const [open, setOpen] = useState(false);
+    const [selected, setSelected] = useState(arrSelected);
+    console.log('renders');
+    console.log(search);
+
+    return (
+        <div className='min-h-[15rem] h-auto w-100 m-4 p-4 border-[1px] border-gray-200'>
+            <div>
+                <input
+                    className="min-h-8 h-auto w-80 p-2 border-2 border-gray-300 rounded-sm  shadow appearance-none  text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-blue-300 hover:blue-300`"
+                    contentEditable
+                    onChange={(e) => setSearch(e.target.value)}
+                    onFocus={() => {
+                        setOpen(true);
+                    }}
+                    onBlur={() => {
+                        setTimeout(() => setOpen(false), 200)
+                    }}
+                    value={search}
+                />
+
+            </div>
+            {open && <div id="scrollbar" className='h-[8rem] bg-white w-[20rem] drop-shadow-md overflow-y-auto absolute'>
+                {
+                    options.filter((item, i) => {
+                        if (search === "") {
+                            return item;
+                        } else if (item.title.toLowerCase().includes(search.toLowerCase())) {
+                            return item;
+                        }
+                        return null;
+                    }).map((item, i) => {
+                        return (
+                            <div>
+                                {<p className="hover:bg-blue-100 hover:text-blue-600 h-[2.2rem] w-full " key={i} onClick={() => { arrSelected.push(item.title); setSelected(arrSelected) }}>{item.title}</p>}
+                            </div>
+                        )
+                    })
+                }
+            </div>} 
+            <div className='mt-8 w-80'>
+                    <ul className={`flex flex-wrap text-md ${selected.length === 0 ? 'hidden' : null}`}>
+                        {
+                            selected.map((select, i) => {
+                                return <li key={i} className='m-1 bg-blue-500 text-white px-[8px] pb-[2px] rounded-sm'>{select}<span className='px-[2px] ml-[2px] hover:cursor-pointer' onClick={() => {arrSelected.splice(i,1);setSelected([...arrSelected]); }}><FaRegWindowClose className='inline'/></span></li>
+                            })
+                        }
+                    </ul>
+            </div>
+        </div>
+    );
+
+}
+
+export default TextInputSelect;