added time line

src/App.js

@@ -100,7 +100,7 @@ function App() {
         {/* <Toast /> */}
         {/* <ProductSuggestion /> */}
         {/* <ProductImage /> */}
-        {/* <ProductTab /> */}
+        <ProductTab />
         {/* <ProductStatusCard /> */}
         {/* <AdvertisementDesign1 /> */}
         {/* <AdvertisementDesign2 /> */}
@@ -117,6 +117,7 @@ function App() {
         {/* <ReactTable4 /> */}
         {/* <ReactTable5 /> */}
         {/* <Digikala /> */}
+        <SidebarDesign2 />
         {/* <HeaderDesign1 /> */}
         {/* <div className="flex">
           <SidebarDesign2 className="w-1/5" />

src/components/SelectYear/arrow-down.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="vuesax_bold_arrow-down" data-name="vuesax/bold/arrow-down" transform="translate(-236 -252)">
+    <g id="arrow-down">
+      <path id="Vector" d="M12.919,0H1.079a1.077,1.077,0,0,0-.76,1.84L5.5,7.02a2.131,2.131,0,0,0,3.01,0l1.97-1.97,3.21-3.21A1.082,1.082,0,0,0,12.919,0Z" transform="translate(241.001 260.18)" fill="#292d32"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(260 276) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/components/SelectYear/arrow-up.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="vuesax_bold_arrow-up" data-name="vuesax/bold/arrow-up" transform="translate(-172 -252)">
+    <g id="arrow-up">
+      <path id="Vector" d="M13.677,5.8l-3.21-3.21L8.507.623a2.131,2.131,0,0,0-3.01,0L.317,5.8a1.079,1.079,0,0,0,.76,1.84h11.84A1.077,1.077,0,0,0,13.677,5.8Z" transform="translate(177.003 260.177)" fill="#292d32"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(196 276) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/components/SelectYear/index.js

@@ -1,41 +1,81 @@
-import React from "react";
+import React, { useState } from "react";
+
+import "./index.scss";
+
+import arrowDown from "./arrow-down.svg";
+import arrowUp from "./arrow-up.svg";
+import Month from "./Month.js";
+
+const SelectYear = ({ items }) => {
+  const [selectedYear, setSelectedYear] = useState(null);
 
-const SelectYear = () => {
   return (
-    <section className="flex flex-row items-center bg-pink-200 mx-auto">
-      <div>
-        <span>1400</span>
+    <section className="flex flex-row items-center mx-auto w-8/12 my-20">
+      <div className="flex flex-col items-center">
+        <img src={arrowUp} />
+        <div className="h-32 overflow-auto overflow-x-hidden overflow-y-hidden">
+          {items.map((item, index) => (
+            <div className="flex flex-col" key={index}>
+              <p
+                onClick={() => setSelectedYear(item)}
+                className={`text-base my-2  cursor-pointer text-center ${
+                  selectedYear === item
+                    ? "text-[#06BACE] font-bold text-2xl"
+                    : "text-gray-300"
+                }`}
+              >
+                {item.year}
+              </p>
+            </div>
+          ))}
+        </div>
+        <img src={arrowDown} />
       </div>
-      <div className="bg-[#06BACE] w-2 h-full rounded"></div>
+      <div className="bg-[#06BACE] w-1.5 h-96 mx-4 rounded"></div>
       <div className="flex flex-col items-center">
-        <span>فروردین</span>
-        <span>فروردین</span>
-        <span>فروردین</span>
-        <span>فروردین</span>
-        <span>فروردین</span>
-        <span>فروردین</span>
-        <span>فروردین</span>
-        <span>فروردین</span>
-        <span>فروردین</span>
-        <span>فروردین</span>
-        <span>فروردین</span>
-        <span>فروردین</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 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> */}
     </section>
   );
 };
 
 export default SelectYear;
 
-// SelectYear.defaultProps = {
-//     date: [
-//         {
-//             year: "1400",
-//             months: [
-//                 {
-
-//                 }
-//             ]
-//         }
-//     ]
-// }
+SelectYear.defaultProps = {
+  items: [
+    {
+      year: "1400",
+      components: <Month />,
+    },
+    {
+      year: "1399",
+      components: <Month />,
+    },
+    {
+      year: "1398",
+      components: <Month />,
+    },
+    {
+      year: "1397",
+      components: <Month />,
+    },
+    {
+      year: "1396",
+      components: <Month />,
+    },
+  ],
+};

src/components/SelectYear/index.scss

@@ -0,0 +1,11 @@
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+.tabbar {
+  cursor: pointer;
+}
+.active2,
+.active2 li a {
+  cursor: move !important;
+}

src/components/TimeLineComponent/index.js

@@ -5,12 +5,16 @@ import TitleSubtitle from "../TitleSubtitle";
 import Timeline from "./Timeline.js";
 
 import search from "./gray-search-icon.svg";
+import SelectYear from "../SelectYear";
 
 const TimeLineComponent = ({ data }) => {
   return (
     <div className="px-10 py-4 mx-auto bg-white">
       <div className="flex flex-row items-start justify-between">
-        <TitleSubtitle />
+        <div>
+          <TitleSubtitle />
+          <SelectYear />
+        </div>
         <div className="flex-1">
           <Timeline />
         </div>