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.

94 lines
2.4 KiB

3 years ago
import React, { useState } from "react";
import filter from "./filter.svg";
import plus from "./plus.svg";
import more from "./more2.svg";
3 years ago
import DropDown from "./DropDown";
3 years ago
export function EditButtons({ buttons }) {
3 years ago
const [activeFilter, setActiveFilter] = useState(null);
3 years ago
return (
3 years ago
<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>
3 years ago
</div>
);
}
EditButtons.defaultProps = {
buttons: [
{
logo: plus,
width: "w-3",
height: "h-3",
title: "ثبت جدید",
backgroundColor: "#65A9FF",
border: "border-b-4",
borderColor: "#3686EC",
padding: "4px 7px",
3 years ago
// components: "d",
3 years ago
},
{
logo: filter,
width: "w-5",
height: "h-5",
title: null,
backgroundColor: "#F3F8FF",
border: null,
borderColor: null,
3 years ago
// components: "a",
3 years ago
},
{
logo: more,
width: "w-5",
height: "h-5",
title: null,
textColor: null,
backgroundColor: "#F3F8FF",
border: null,
borderColor: null,
3 years ago
// components: <DropDown />,
3 years ago
},
],
};