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.

82 lines
2.0 KiB

3 years ago
import React, { useState } from "react";
3 years ago
import ScrollContainer from "react-indiana-drag-scroll";
3 years ago
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);
3 years ago
return (
3 years ago
<section className="flex flex-row items-center mx-auto w-8/12 my-20">
<div className="flex flex-col items-center">
<img src={arrowUp} />
3 years ago
<ScrollContainer ignoreElements={"#not-work-drag"}>
<div
className=""
id="not-work-drag"
style={{
height: "100%",
position: "absolute",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
left: "12%",
}}
></div>
<div className="flex flex-col h-28" style={{}}>
{items.map((item, index) => (
3 years ago
<p
3 years ago
key={index}
3 years ago
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>
3 years ago
))}
</div>
</ScrollContainer>
3 years ago
<img src={arrowDown} />
3 years ago
</div>
3 years ago
<div className="bg-[#06BACE] w-1.5 h-96 mx-4 rounded"></div>
3 years ago
<div className={`flex flex-col items-center`}>
3 years ago
{selectedYear?.components}
3 years ago
</div>
3 years ago
</section>
);
};
export default SelectYear;
3 years ago
SelectYear.defaultProps = {
items: [
{
year: "1400",
components: <Month />,
},
{
year: "1399",
components: <Month />,
},
{
year: "1398",
components: <Month />,
},
{
year: "1397",
components: <Month />,
},
{
year: "1396",
components: <Month />,
},
],
};