update

src/App.js

@@ -97,17 +97,17 @@ function App() {
         {/* <Testttt /> */}
         {/* <Design2D /> */}
         {/* <Features /> */}
-        <Feedback />
+        {/* <Feedback /> */}
         {/* <Alert /> */}
         {/* <Toast /> */}
-        <ProductSuggestion />
+        {/* <ProductSuggestion /> */}
         {/* <ProductImage /> */}
-        <ProductTab />
+        {/* <ProductTab /> */}
         {/* <ProductStatusCard /> */}
         {/* <AdvertisementDesign1 /> */}
         {/* <AdvertisementDesign2 /> */}
         {/* <AdvertisementDesign3 /> */}
-        <CourseChapter />
+        {/* <CourseChapter /> */}
         {/* <SidebarMenu /> */}
         {/* <SimpleBarChart /> */}
         {/* <SpecifiedDomainRadarChart /> */}
@@ -143,10 +143,10 @@ function App() {
         {/* <CancleIcon /> */}
         {/* <ProfilePicNextToEachOther /> */}
         {/* <SemiDonut /> */}
-        <FolderTree />
+        {/* <FolderTree /> */}
         {/* <GridListTable /> */}
         {/* <PopupCard /> */}
-        <TimeLine />
+        {/* <TimeLine /> */}
         {/* <TimeLineComponent /> */}
         <SelectYear />
         {/* <IndianaDragScroll /> */}

src/components/SelectYear/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import ScrollContainer from "react-indiana-drag-scroll";
 
 import "./index.scss";
@@ -10,6 +10,12 @@ import Month from "./Month.js";
 const SelectYear = ({ items }) => {
   const [selectedYear, setSelectedYear] = useState(null);
 
+  const inputRef = useRef();
+
+  function focus() {
+    console.log(inputRef.current);
+  }
+
   return (
     <section className="flex flex-row items-center mx-auto w-8/12 my-20">
       <div className="flex flex-col items-center">
@@ -30,9 +36,13 @@ const SelectYear = ({ items }) => {
           <div className="flex flex-col h-28" style={{}}>
             {items.map((item, index) => (
               <p
+                ref={inputRef}
                 key={index}
-                onClick={() => setSelectedYear(item)}
-                className={`text-base my-2  cursor-pointer text-center ${
+                // onClick={() => setSelectedYear(item)}
+                onClick={() => {
+                  setSelectedYear(item);
+                }}
+                className={`text-base my-2  cursor-pointer text-center transition ease-in-out duration-300 ${
                   selectedYear === item
                     ? "text-[#06BACE] font-bold text-2xl"
                     : "text-gray-300"
@@ -47,7 +57,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 +68,40 @@ export default SelectYear;
 SelectYear.defaultProps = {
   items: [
     {
+      id: 1,
       year: "1400",
-      components: <Month />,
     },
     {
+      id: 2,
       year: "1399",
-      components: <Month />,
     },
     {
+      id: 3,
       year: "1398",
-      components: <Month />,
     },
     {
-      year: "1397",
-      components: <Month />,
+      id: 4,
+      year: "1400",
     },
     {
-      year: "1396",
-      components: <Month />,
+      id: 5,
+      year: "1399",
+    },
+    {
+      id: 6,
+      year: "1398",
+    },
+    {
+      id: 7,
+      year: "1400",
+    },
+    {
+      id: 8,
+      year: "1399",
+    },
+    {
+      id: 9,
+      year: "1398",
     },
   ],
 };