update src/components/SelectYear/index.js

master
Your Name 2 years ago
parent 4aabeddbe2
commit 38b9c5eae6
  1. 51
      src/components/SelectYear/index.js

@ -14,10 +14,10 @@ const SelectYear = ({ items }) => {
<section className="flex flex-row items-center mx-auto w-8/12 my-20"> <section className="flex flex-row items-center mx-auto w-8/12 my-20">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<img src={arrowUp} /> <img src={arrowUp} />
<ScrollContainer ignoreElements={"#not-work-drag"}> {console.log(window.scrollY)}
<ScrollContainer ignoreElements={"#not-work-drag"} className="">
<div <div
className="" className="transition ease-in-out delay-500" id="not-work-drag"
id="not-work-drag"
style={{ style={{
height: "100%", height: "100%",
position: "absolute", position: "absolute",
@ -26,16 +26,19 @@ const SelectYear = ({ items }) => {
justifyContent: "space-between", justifyContent: "space-between",
left: "12%", left: "12%",
}} }}
></div> >
<div className="flex flex-col h-28" style={{}}> </div>
<div className="flex flex-col h-28 " style={{}}>
{items.map((item, index) => ( {items.map((item, index) => (
<p <p
onClick={() => {
setSelectedYear(item);
}}
key={index} key={index}
onClick={() => setSelectedYear(item)} className={`text-base my-2 cursor-pointer text-center transition ease-in-out delay-150 ${
className={`text-base my-2 cursor-pointer text-center ${
selectedYear === item selectedYear === item
? "text-[#06BACE] font-bold text-2xl" ? "text-[#06BACE] font-bold text-2xl"
: "text-gray-300" : "text-gray-500"
}`} }`}
> >
{item.year} {item.year}
@ -47,7 +50,7 @@ const SelectYear = ({ items }) => {
</div> </div>
<div className="bg-[#06BACE] w-1.5 h-96 mx-4 rounded"></div> <div className="bg-[#06BACE] w-1.5 h-96 mx-4 rounded"></div>
<div className={`flex flex-col items-center`}> <div className={`flex flex-col items-center`}>
{selectedYear?.components} <Month />
</div> </div>
</section> </section>
); );
@ -58,24 +61,24 @@ export default SelectYear;
SelectYear.defaultProps = { SelectYear.defaultProps = {
items: [ items: [
{ {
year: "1400", year: "1400"},
components: <Month />, {
}, year: "1399"},
{
year: "1398"},
{
year: "1397"},
{
year: "1396"},
{
year: "1400"},
{ {
year: "1399", year: "1399"},
components: <Month />,
},
{ {
year: "1398", year: "1398"},
components: <Month />,
},
{ {
year: "1397", year: "1397"},
components: <Month />,
},
{ {
year: "1396", year: "1396"},
components: <Month />,
},
], ],
}; };

Loading…
Cancel
Save