You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

127 lines
3.2 KiB

3 years ago
import React, { useState } from "react";
import filter from "./filter.svg";
import plus from "./plus.svg";
import more from "./more2.svg";
export function EditButtons({ buttons }) {
const [selectedButton, setSelectedButton] = useState(null);
return (
<div className="flex flex-row items-center justify-end">
{buttons.map((button, index) => (
<div>
<button
id="dropdownButton"
data-dropdown-toggle="dropdown"
type="button"
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"
}`}
/>
</button>
<div
id="dropdown"
className="hidden z-10 w-44 text-base list-none bg-red-600 rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
>
{button.buttonSubItems === !null &&
button.buttonSubItems.map((buttonSubItem, i) => (
<p>{buttonSubItem.title}</p>
))}
{/* <ul className="py-1" aria-labelledby="dropdownButton">
{button.buttonSubItems === !null &&
button.buttonSubItems.map((buttonSubItem, i) => (
<li className="bg-red-400">{buttonSubItem.title}</li>
))}
</ul> */}
</div>
</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",
buttonSubItems: [],
},
{
logo: filter,
width: "w-5",
height: "h-5",
title: null,
backgroundColor: "#F3F8FF",
border: null,
borderColor: null,
components: "a",
buttonSubItems: [],
},
{
logo: more,
width: "w-5",
height: "h-5",
title: null,
textColor: null,
backgroundColor: "#F3F8FF",
border: null,
borderColor: null,
components: "a",
buttonSubItems: [
{
title: "دراپ داون 1",
},
{
title: "دراپ داون 2",
},
{
title: "دراپ داون 3",
},
{
title: "دراپ داون 4",
},
{
title: "دراپ داون 5",
},
],
},
],
};
// {
// logo: settings,
// width: "w-5",
// height: "h-5",
// title: null,
// textColor: null,
// backgroundColor: "#F3F8FF",
// components: "b",
// },