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.
81 lines
2.3 KiB
81 lines
2.3 KiB
import React, { useState } from "react"; |
|
|
|
import "./index.scss"; |
|
|
|
import arrowDown from "./arrow-down.svg"; |
|
import arrowUp from "./arrow-up.svg"; |
|
import Month from "./Month.js"; |
|
|
|
const SelectYear = ({ items }) => { |
|
const [selectedYear, setSelectedYear] = useState(null); |
|
|
|
return ( |
|
<section className="flex flex-row items-center mx-auto w-8/12 my-20"> |
|
<div className="flex flex-col items-center"> |
|
<img src={arrowUp} /> |
|
<div className="h-32 overflow-auto overflow-x-hidden"> |
|
{items.map((item, index) => ( |
|
<div className="flex flex-col" key={index}> |
|
<p |
|
onClick={() => setSelectedYear(item)} |
|
className={`text-base my-2 cursor-pointer text-center ${ |
|
selectedYear === item |
|
? "text-[#06BACE] font-bold text-2xl" |
|
: "text-gray-300" |
|
}`} |
|
> |
|
{item.year} |
|
</p> |
|
</div> |
|
))} |
|
</div> |
|
<img src={arrowDown} /> |
|
</div> |
|
<div className="bg-[#06BACE] w-1.5 h-96 mx-4 rounded"></div> |
|
<div className="flex flex-col items-center"> |
|
<span className="text-xs my-2">فروردین</span> |
|
<span className="text-xs my-2">اردیبهشت</span> |
|
<span className="text-xs my-2">خرداد</span> |
|
<span className="text-xs my-2">تیر</span> |
|
<span className="text-xs my-2">مرداد</span> |
|
<span className="text-xs my-2 text-[#06BACE]">شهریور</span> |
|
<span className="text-xs my-2">مهر</span> |
|
<span className="text-xs my-2">آبان</span> |
|
<span className="text-xs my-2">آذر</span> |
|
<span className="text-xs my-2">دی</span> |
|
<span className="text-xs my-2">بهمن</span> |
|
<span className="text-xs my-2">اسفند</span> |
|
</div> |
|
{/* <div className={`flex flex-col items-center`}> |
|
{selectedYear?.components} |
|
</div> */} |
|
</section> |
|
); |
|
}; |
|
|
|
export default SelectYear; |
|
|
|
SelectYear.defaultProps = { |
|
items: [ |
|
{ |
|
year: "1400", |
|
components: <Month />, |
|
}, |
|
{ |
|
year: "1399", |
|
components: <Month />, |
|
}, |
|
{ |
|
year: "1398", |
|
components: <Month />, |
|
}, |
|
{ |
|
year: "1397", |
|
components: <Month />, |
|
}, |
|
{ |
|
year: "1396", |
|
components: <Month />, |
|
}, |
|
], |
|
};
|
|
|