update

src/App.js

@@ -97,7 +97,7 @@ function App() {
         {/* <Alert /> */}
         {/* <Toast /> */}
         {/* <ProductSuggestion /> */}
-        {/* <ProductImage /> */}
+        <ProductImage />
         {/* <ProductTab /> */}
         {/* <ProductStatusCard /> */}
         {/* <AdvertisementDesign1 /> */}
@@ -139,9 +139,9 @@ function App() {
         {/* <SemiDonut /> */}
         {/* <FolderTree /> */}
         {/* <GridListTable /> */}
-        <PopupCard />
+        {/* <PopupCard /> */}
         <TimeLine />
-        <TimeLineComponent />
+        {/* <TimeLineComponent /> */}
 
         {/* <SidebarDesign2 className="w-1/5" /> */}
       </div>

src/components/PopupCard/index.js

@@ -203,7 +203,7 @@ const PopupCard = ({ selectedChecklist }) => {
                       className="opacity-0 absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-full cursor-pointer"
                       style={{ top: "39%" }}
                     />
-                    <p className="text-sm text-center">
+                    <p className="text-xs text-center leading-6">
                       یک فایل را اینجا بکشید یا از{" "}
                       <span className="text-[#65A9FF] ">
                         رایانه خود انتخاب کنید

src/components/TimeLineComponent/TimeLineItem.js

@@ -9,16 +9,13 @@ const TimeLineItem = ({ data }) => (
       className="timeline-item-content relative bg-white rounded-md shadow-sm flex flex-col items-end border border-[#D6D6D6] "
       style={{ maxWidth: "70%", width: "400px" }}
     >
+      {/* top --> time & date */}
       <div className="flex flex-row-reverse p-3 self-end">
         <time className="text-xs text-[#0A7C9F]">{data.date}</time>
         <span className="text-xs text-[#0A7C9F]">-</span>
         <time className="text-xs text-[#0A7C9F] ml-1">{data.time}</time>
       </div>
-      {/* <div className="flex flex-row-reverse items-center justify-between w-full">
+      {/* middle --> title & content */}
-        <div className="bg-[#D4E6FF] w-10 h-10 rounded-full">
-          <div className="bg-[#D4E6FF99] w-10 h-10 rounded-full"></div>
-        </div>
-      </div> */}
       <div className="bg-[#F3F3F3] w-full px-4 py-2 flex flex-row items-center">
         <div className="bg-[#65A9FF] w-1 h-full rounded ml-2"></div>
         <p className="text-right text-sm font-bold text-[#00253A]">
@@ -28,6 +25,19 @@ const TimeLineItem = ({ data }) => (
       <p className="mt-2 text-xs text-justify px-4 text-[#00253A99] text-light leading-6">
         {data.content}
       </p>
+      {/* divider */}
+      <div className="border border-[#F3F3F3] w-11/12 mt-4 mx-auto"></div>
+      {/* bottom --> users */}
+      <div className="flex flex-row items-center self-start px-4 py-2">
+        {data.users.map((user, index) => (
+          <div key={index} className="flex flex-row items-center">
+            <p className="mr-1 text-sm text-[#00253A]">
+              {user.name + " " + user.lname}
+            </p>
+            {"،"}
+          </div>
+        ))}
+      </div>
       <span className="circle"></span>
     </div>
   </div>

src/components/TimeLineComponent/data.js

@@ -1,3 +1,6 @@
+import profilePic1 from "./profilePic1.svg";
+import profilePic2 from "./profilePic2.svg";
+
 const data = [
   {
     date: "1400/12/28",
@@ -7,22 +10,81 @@ const data = [
     جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت
 پایان جنگ ایران و عراق هم ‌زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بین‌المللی گردید 
     `,
+    users: [
+      {
+        name: "علی",
+        lname: "علوی",
+        profilePic: profilePic2,
       },
       {
-    date: "1400/12/28",
+        name: "غلام",
-    time: " 14:30",
+        lname: "قلی نژاد",
-    text: "انجام عملیات بازگردانی و ذخیره سازی",
+        profilePic: profilePic1,
+      },
+    ],
+  },
+  {
+    date: "1395/12/28",
+    time: " 12:30",
+    text: "انجام عملیات بازگردانی و ذخیره سازی2",
     content: `
     جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت
-پایان جنگ ای پایان جنگ ایران و عراق پایان جنگ ایران و عراق پایان جنگ ایران و عراق ران و عراق هم ‌`,
+پایان جنگ ایران و عراق هم ‌زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بین‌المللی گردید 
+    `,
+    users: [
+      {
+        name: "غلام",
+        lname: "قلی نژاد",
+        profilePic: profilePic1,
+      },
+      {
+        name: "علی",
+        lname: "علوی",
+        profilePic: profilePic2,
+      },
+    ],
   },
   {
     date: "1400/12/28",
     time: " 14:30",
     text: "انجام عملیات بازگردانی و ذخیره سازی",
     content: `
-    جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثپایان جنگ ایران و عراق پایان جنگ ایران و عراق پایان جنگ ایران و عراق ی در واکنش به اشغال کویت توسط عراق انجام گرفت
+    جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت
+پایان جنگ ایران و عراق هم ‌زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بین‌المللی گردید 
+    `,
+    users: [
+      {
+        name: "علی",
+        lname: "علوی",
+        profilePic: profilePic2,
+      },
+      {
+        name: "غلام",
+        lname: "قلی نژاد",
+        profilePic: profilePic1,
+      },
+    ],
+  },
+  {
+    date: "1395/12/28",
+    time: " 12:30",
+    text: "انجام عملیات بازگردانی و ذخیره سازی2",
+    content: `
+    جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت
+پایان جنگ ایران و عراق هم ‌زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بین‌المللی گردید 
     `,
+    users: [
+      {
+        name: "غلام",
+        lname: "قلی نژاد",
+        profilePic: profilePic1,
+      },
+      {
+        name: "علی",
+        lname: "علوی",
+        profilePic: profilePic2,
+      },
+    ],
   },
 ];