update

src/App.js

@@ -115,7 +115,7 @@ function App() {
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}
         {/* <ReactTable3 /> */}
-        {/* <ReactTable4 /> */}
+        <ReactTable4 />
         {/* <ReactTable5 /> */}
         {/* <Digikala /> */}
         <SidebarDesign2 />

src/components/SelectYear/Month.js

@@ -1,10 +1,18 @@
-import React from "react";
+import React, { useState } from "react";
 
 const Month = ({ items }) => {
+  const [selectedYear, setSelectedYear] = useState(null);
+
   return (
     <div className="flex flex-col">
       {items.map((item, index) => (
-        <span className="text-xs my-2" key={index}>
+        <span
+          onClick={() => setSelectedYear(selectedYear === item ? null : item)}
+          className={`text-xs my-2 cursor-pointer ${
+            selectedYear === item ? "text-[#06BACE] font-bold " : ""
+          }`}
+          key={index}
+        >
           {item.month}
         </span>
       ))}

src/components/SelectYear/index.js

@@ -78,4 +78,42 @@ SelectYear.defaultProps = {
       components: <Month />,
     },
   ],
+  months: [
+    {
+      month: "فروردین",
+    },
+    {
+      month: "اردیبهشت",
+    },
+    {
+      month: "خرداد",
+    },
+    {
+      month: "تیر",
+    },
+    {
+      month: "مرداد",
+    },
+    {
+      month: "شهریور",
+    },
+    {
+      month: "مهر",
+    },
+    {
+      month: "آبان",
+    },
+    {
+      month: "آذر",
+    },
+    {
+      month: "دی",
+    },
+    {
+      month: "بهمن",
+    },
+    {
+      month: "اسفند",
+    },
+  ],
 };