73 lines
1.9 KiB

import React from "react";
import Calender from "../Calender";
import Button from "../../ButtonDesign/Button/";
const CalenderList = ({ buttons, leftArrow, rightArrow }) => {
return (
<div className="flex flex-col bg-white mx-auto">
<div className="w-[96%] mx-auto flex flex-row items-center">
{/* right side */}
<div className=" flex flex-row items-center divide-x-2 divide-surfaceBorder divide-x-reverse">
{/* right side */}
<div className="flex flex-row items-center px-4 text-primaryText">
<img src={rightArrow} class="w-8" alt="right-arrow" />
<span className="text-sm mx-2">خرداد</span>
<img src={leftArrow} class="w-8" alt="left-arrow" />
</div>
{/* left side */}
<div className="flex px-4 flex-row items-center">
{buttons.map((button, i) => (
<Button
key={i}
text={button.title}
className={`${button.className} w-14 text-sm text-primaryText border border-primary p-2`}
/>
))}
</div>
</div>
</div>
{/* ? calender list */}
<div className="flex flex-wrap space-between gap-5">
<Calender />
<Calender />
<Calender />
<Calender />
<Calender />
<Calender />
<Calender />
<Calender />
<Calender />
<Calender />
<Calender />
<Calender />
</div>
</div>
);
};
export default CalenderList;
CalenderList.defaultProps = {
leftArrow: "images/CalenderListGroup2496.svg",
rightArrow: "images/CalenderListGroup2495.svg",
buttons: [
{
title: "روز",
className: "rounded-tr-lg rounded-br-lg",
},
{
title: "هفته",
className: "",
},
{
title: "ماه",
className: "",
},
{
title: "سال",
className: "rounded-tl-lg rounded-bl-lg",
},
],
};