update src/components/SelectYear/index.js

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