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.
93 lines
2.4 KiB
93 lines
2.4 KiB
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 [activeFilter, setActiveFilter] = useState(null); |
|
return ( |
|
<div className="flex flex-row items-center justify-end"> |
|
<button |
|
className="mx-1 flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600" |
|
style={{ backgroundColor: "#65A9FF" }} |
|
> |
|
ثبت جدید |
|
<img src={plus} alt="" className={`cursor-pointer w-2 mr-1 `} /> |
|
</button> |
|
{/* filter */} |
|
<img |
|
src={filter} |
|
alt="" |
|
className={`p-2 rounded border border-blue-300 cursor-pointer mx-1 w-8 ${ |
|
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> |
|
); |
|
} |
|
|
|
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 />, |
|
}, |
|
], |
|
};
|
|
|