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

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 />,
},
],
};