updaate

src/components/ReactTable3/EditButtons.js

@@ -1,12 +1,41 @@
+import React, {useState} from 'react';
+
 import search from './search-normal.svg';
+import filter from './filter.svg';
+import settings from './settings.svg';
+import plus from './plus.svg';
 
+export function EditButtons() {
+  const [openModal, setOpenModal] = useState(false);
 
-export function EditButtons({  }) {
     return (
       <div className="flex flex-row items-center">
-        <div className="border border-blue-400 flex flex-col items-center justify-center p-1 rounded-sm bg-blue-200 bg-opacity-30">
+        {/* serach box */}
-          <img src={search} alt="" className="w-6 cursor-pointer mr-2" />
+        <div className="border border-blue-400 flex flex-col items-center justify-center p-1 rounded-sm bg-blue-200 bg-opacity-30 mx-1"
+          onClick={() => setOpenModal(true)}  
+        >
+          <img src={search} alt="" className="w-6 cursor-pointer" onClick={() => setOpenModal(true)} />
+        </div>
+        {/* filter */}
+        <div className="border border-blue-400 flex flex-col items-center justify-center p-1 rounded-sm bg-blue-200 bg-opacity-30 mx-1"
+        >
+          <img src={filter} alt="" className="w-6 h-6 cursor-pointer" onClick={() => setOpenModal(true)} />
+        </div>
+        <div className="border border-blue-400 flex flex-col items-center justify-center p-1 rounded-sm bg-blue-200 bg-opacity-30 mx-1"
+        >
+          <img src={settings} alt="" className="w-6 cursor-pointer" onClick={() => setOpenModal(true)} />
         </div>
+        {/* <button></button> */}
       </div>
     );
   }
+
+  
+
+//   <div
+//   className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg flex items-center justify-center bg-gray-900 fixed left-0 top-0 duration-1000  transition-all
+//     ${openModal ? "opacity-80" : "opacity-10 pointer-events-none"}
+//   `}
+//   onClick={() => setOpenModal(false)}
+// >
+// </div>