update

src/App.js

@@ -68,6 +68,7 @@ import TimeLineComponent from "./components/TimeLineComponent";
 
 import TitleSubtitle from "./components/TitleSubtitle";
 import TimeLine from "./components/TimeLineComponent/Timeline";
+import ProfilePicNextToEachOther from "./components/ProfilePicNextToEachOther";
 
 // import Digikala from "./components/Digikala/ImageSlider";
 
@@ -96,7 +97,7 @@ function App() {
         {/* <Feedback /> */}
         {/* <Alert /> */}
         {/* <Toast /> */}
-        {/* <ProductSuggestion /> */}
+        <ProductSuggestion />
         <ProductImage />
         {/* <ProductTab /> */}
         {/* <ProductStatusCard /> */}
@@ -123,7 +124,7 @@ function App() {
             <FooterDesign1 />
           </span>
         </div> */}
-        {/* <BreadCrumb /> */}
+        <BreadCrumb />
         {/* <SearchBox /> */}
         {/* <FileManager /> */}
         {/* <TitleSubtitle /> */}
@@ -136,12 +137,13 @@ function App() {
         {/* <OutlineInput /> */}
         {/* <ButtonNewDesign /> */}
         {/* <CancleIcon /> */}
+        <ProfilePicNextToEachOther />
         {/* <SemiDonut /> */}
         {/* <FolderTree /> */}
         {/* <GridListTable /> */}
-        {/* <PopupCard /> */}
+        <PopupCard />
         <TimeLine />
-        {/* <TimeLineComponent /> */}
+        <TimeLineComponent />
 
         {/* <SidebarDesign2 className="w-1/5" /> */}
       </div>

src/components/TimeLineComponent/TimeLineItem.js

@@ -7,7 +7,7 @@ const TimeLineItem = ({ data }) => (
   >
     <div
       className="timeline-item-content relative bg-white rounded-md shadow-sm flex flex-col items-end border border-[#D6D6D6] "
-      style={{ maxWidth: "70%", width: "400px" }}
+      style={{ maxWidth: "100%", width: "400px" }}
     >
       {/* top --> time & date */}
       <div className="flex flex-row-reverse p-3 self-end">
@@ -28,16 +28,38 @@ const TimeLineItem = ({ data }) => (
       {/* 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 className="flex flex-row justify-between px-4 py-2 w-full">
+        <div className="flex flex-row items-center">
+          {data.users.slice(0, 3).map((user, index) => (
             <div key={index} className="flex flex-row items-center">
-            <p className="mr-1 text-sm text-[#00253A]">
+              <p className="mr-1 text-xs text-[#00253A]">
                 {user.name + " " + user.lname}
               </p>
-            {"،"}
+              {Number(index) >= 2 ? (
+                <p className=" text-xs mx-1 text-[#00253A]">و</p>
+              ) : (
+                <p className=" text-xs text-[#00253A]">،</p>
+              )}
+              {Number(index) === 2 && (
+                <p className=" text-xs text-[#00253A]">
+                  {data.users.length - 2}+ نفر دیگه
+                </p>
+              )}
+            </div>
+          ))}
         </div>
+        {/* profilePic */}
+        <div className="flex flex-row items-center">
+          {data.users.slice(0, 3).map((user, i) => (
+            <img
+              key={i}
+              src={user.profilePic}
+              className="w-10"
+              style={{ marginLeft: "-10px" }}
+            />
           ))}
         </div>
+      </div>
       <span className="circle"></span>
     </div>
   </div>

src/components/TimeLineComponent/Timeline.js

@@ -6,7 +6,7 @@ import TimeLineItem from "./TimeLineItem.js";
 const TimeLine = () =>
   timeLineData.length > 0 && (
     <div className="timeline-container flex flex-col relative  my-10">
-      {timeLineData.slice(0, 3).map((data, idx) => (
+      {timeLineData.slice(0, 6).map((data, idx) => (
         <TimeLineItem data={data} key={idx} />
       ))}
     </div>

src/components/TimeLineComponent/data.js

@@ -21,6 +21,150 @@ const data = [
         lname: "قلی نژاد",
         profilePic: profilePic1,
       },
+      {
+        name: "علی",
+        lname: "علوی",
+        profilePic: profilePic2,
+      },
+      {
+        name: "غلام",
+        lname: "قلی نژاد",
+        profilePic: profilePic1,
+      },
+      {
+        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,
+      },
+      {
+        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,
+      },
+    ],
+  },
+  {
+    date: "1400/12/28",
+    time: " 14:30",
+    text: "انجام عملیات بازگردانی و ذخیره سازی",
+    content: `
+    جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت
+پایان جنگ ایران و عراق هم ‌زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بین‌المللی گردید 
+    `,
+    users: [
+      {
+        name: "علی",
+        lname: "علوی",
+        profilePic: profilePic2,
+      },
+      {
+        name: "غلام",
+        lname: "قلی نژاد",
+        profilePic: profilePic1,
+      },
+      {
+        name: "علی",
+        lname: "علوی",
+        profilePic: profilePic2,
+      },
+      {
+        name: "غلام",
+        lname: "قلی نژاد",
+        profilePic: profilePic1,
+      },
+      {
+        name: "علی",
+        lname: "علوی",
+        profilePic: profilePic2,
+      },
+      {
+        name: "غلام",
+        lname: "قلی نژاد",
+        profilePic: profilePic1,
+      },
+      {
+        name: "علی",
+        lname: "علوی",
+        profilePic: profilePic2,
+      },
+      {
+        name: "غلام",
+        lname: "قلی نژاد",
+        profilePic: profilePic1,
+      },
     ],
   },
   {