|
|
|
import React, { useState } from "react";
|
|
|
|
|
|
|
|
import filter from "./filter.svg";
|
|
|
|
import plus from "./plus.svg";
|
|
|
|
import more from "./more2.svg";
|
|
|
|
import DropDown from "./DropDown";
|
|
|
|
|
|
|
|
export function EditButtons({ buttons }) {
|
|
|
|
const [selectedButton, setSelectedButton] = useState(null);
|
|
|
|
return (
|
|
|
|
<div className="flex flex-row items-center justify-end ">
|
|
|
|
{buttons.map((button, index) => (
|
|
|
|
<div>
|
|
|
|
<div
|
|
|
|
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={button.logo}
|
|
|
|
alt=""
|
|
|
|
className={`cursor-pointer ${button.width} ${button.height} ${
|
|
|
|
button.title === null ? "mr-0" : "mx-2"
|
|
|
|
}`}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
<div>{selectedButton?.components}</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
EditButtons.defaultProps = {
|
|
|
|
buttons: [
|
|
|
|
{
|
|
|
|
logo: plus,
|
|
|
|
width: "w-3",
|
|
|
|
height: "h-3",
|
|
|
|
title: "ثبت جدید",
|
|
|
|
backgroundColor: "#65A9FF",
|
|
|
|
border: "border-b-4",
|
|
|
|
borderColor: "#3686EC",
|
|
|
|
padding: "4px 7px",
|
|
|
|
// components: "d",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
logo: filter,
|
|
|
|
width: "w-5",
|
|
|
|
height: "h-5",
|
|
|
|
title: null,
|
|
|
|
backgroundColor: "#F3F8FF",
|
|
|
|
border: null,
|
|
|
|
borderColor: null,
|
|
|
|
// components: "a",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
logo: more,
|
|
|
|
width: "w-5",
|
|
|
|
height: "h-5",
|
|
|
|
title: null,
|
|
|
|
textColor: null,
|
|
|
|
backgroundColor: "#F3F8FF",
|
|
|
|
border: null,
|
|
|
|
borderColor: null,
|
|
|
|
// components: <DropDown />,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|