update

src/App.js

@@ -142,7 +142,7 @@ function App() {
         {/* <CancleIcon /> */}
         {/* <ProfilePicNextToEachOther /> */}
         {/* <SemiDonut /> */}
-        {/* <FolderTree /> */}
+        <FolderTree />
         {/* <GridListTable /> */}
         {/* <PopupCard /> */}
         {/* <TimeLine /> */}

src/components/SelectYear/Month.js

@@ -1,20 +1,56 @@
 import React from "react";
 
-const Month = () => {
+const Month = ({ items }) => {
-  return <div>Month</div>;
+  return (
+    <div className="flex flex-col">
+      {items.map((item, index) => (
+        <span className="text-xs my-2" key={index}>
+          {item.month}
+        </span>
+      ))}
+    </div>
+  );
 };
 
 export default Month;
 
 Month.defaultProps = {
-  items: {
+  items: [
-    weight: "1 کیلوگرم",
+    {
-    pageNumber: "400 صفحه",
+      month: "فروردین",
-    pageType: "گلاسه",
+    },
-    bookNumber: "124900985340561870112312499",
+    {
-    publisher: "رزمندگان",
+      month: "اردیبهشت",
-    author: "یک نویسنده گمنام",
+    },
-    bookType: "خشتی",
+    {
-    publishedYear: "1399",
+      month: "خرداد",
-  },
+    },
+    {
+      month: "تیر",
+    },
+    {
+      month: "مرداد",
+    },
+    {
+      month: "شهریور",
+    },
+    {
+      month: "مهر",
+    },
+    {
+      month: "آبان",
+    },
+    {
+      month: "آذر",
+    },
+    {
+      month: "دی",
+    },
+    {
+      month: "بهمن",
+    },
+    {
+      month: "اسفند",
+    },
+  ],
 };

src/components/SelectYear/index.js

@@ -30,6 +30,7 @@ const SelectYear = ({ items }) => {
           <div className="flex flex-col h-28" style={{}}>
             {items.map((item, index) => (
               <p
+                key={index}
                 onClick={() => setSelectedYear(item)}
                 className={`text-base my-2  cursor-pointer text-center ${
                   selectedYear === item
@@ -45,23 +46,9 @@ const SelectYear = ({ items }) => {
         <img src={arrowDown} />
       </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`}>
-        <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> */}
+      </div>
     </section>
   );
 };