update

src/components/ReactTable4/EditButtons.js

@@ -6,39 +6,52 @@ 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">
-      {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} ${
-              selectedButton === button ? "border" : "border-0"
-            }`}
-            key={index}
-            style={{
-              backgroundColor: button.backgroundColor,
-              padding: button.padding,
-            }}
-            onClick={() =>
-              setSelectedButton(selectedButton === button ? null : button)
-            }
       >
-            <p className={` text-white`}>{button.title}</p>
+        ثبت جدید
+        <img src={plus} alt="" className={`cursor-pointer w-2 mr-1 `} />
+      </button>
+      {/* filter */}
       <img
-              src={button.logo}
+        src={filter}
         alt=""
-              className={`cursor-pointer ${button.width} ${button.height} ${
+        className={`p-2 rounded border border-blue-300 cursor-pointer mx-1 w-8 ${
-                button.title === null ? "mr-0" : "mx-2"
+          activeFilter ? "border" : "border-0"
         }`}
+        onClick={() => setActiveFilter(!activeFilter)}
       />
+      {/* dropDown */}
+      <button
+        className="mx-1"
+        id="dropdownButton"
+        data-dropdown-toggle="dropdown"
+        type="button"
+      >
+        <img src={more} alt="" className={`cursor-pointer w-5`} />
+      </button>
+      {/* dropDownItems */}
+      <div
+        style={{ backgroundColor: "#65A9FF" }}
+        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>
-      ))}
-      <div>{selectedButton?.components}</div>
-    </div>
   );
 }