update

src/components/ReactTable4/EditButtons.js

@@ -6,38 +6,51 @@ import more from "./more2.svg";
 import DropDown from "./DropDown";
 
 export function EditButtons({ buttons }) {
-  const [selectedButton, setSelectedButton] = useState(null);
+  const [activeFilter, setActiveFilter] = useState(null);
   return (
-    <div className="flex flex-row items-center justify-end ">
+    <div className="flex flex-row items-center justify-end">
-      {buttons.map((button, index) => (
+      <button
-        <div>
+        className="mx-1 flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600"
-          <div
+        style={{ backgroundColor: "#65A9FF" }}
-            className={`flex flex-row items-center justify-around p-1 rounded-md bg-opacity-30  mx-1 ${
+      >
-              button.border
+        ثبت جدید
-            } ${button.borderColor} ${
+        <img src={plus} alt="" className={`cursor-pointer w-2 mr-1 `} />
-              selectedButton === button ? "border" : "border-0"
+      </button>
-            }`}
+      {/* filter */}
-            key={index}
+      <img
-            style={{
+        src={filter}
-              backgroundColor: button.backgroundColor,
+        alt=""
-              padding: button.padding,
+        className={`p-2 rounded border border-blue-300 cursor-pointer mx-1 w-8 ${
-            }}
+          activeFilter ? "border" : "border-0"
-            onClick={() =>
+        }`}
-              setSelectedButton(selectedButton === button ? null : button)
+        onClick={() => setActiveFilter(!activeFilter)}
-            }
+      />
-          >
+      {/* dropDown */}
-            <p className={` text-white`}>{button.title}</p>
+      <button
-            <img
+        className="mx-1"
-              src={button.logo}
+        id="dropdownButton"
-              alt=""
+        data-dropdown-toggle="dropdown"
-              className={`cursor-pointer ${button.width} ${button.height} ${
+        type="button"
-                button.title === null ? "mr-0" : "mx-2"
+      >
-              }`}
+        <img src={more} alt="" className={`cursor-pointer w-5`} />
-            />
+      </button>
-          </div>
+      {/* dropDownItems */}
-        </div>
+      <div
-      ))}
+        style={{ backgroundColor: "#65A9FF" }}
-      <div>{selectedButton?.components}</div>
+        id="dropdown"
+        className="hidden z-10 text-xs list-none rounded divide-y divide-gray-100 shadow"
+      >
+        <ul className="" aria-labelledby="dropdownButton">
+          <li>
+            <a
+              href="#"
+              className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded"
+            >
+              ایتم شماره1
+            </a>
+          </li>
+        </ul>
+      </div>
     </div>
   );
 }