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.
126 lines
3.2 KiB
126 lines
3.2 KiB
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", |
|
// },
|
|
|