73 lines
1.9 KiB
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", |
|
}, |
|
], |
|
};
|
|
|