update src/components/CardTrelloDesign/index.js, TimeLineItem.js and data.js

src/components/TimeLineComponent/TimeLineItem.js

@@ -1,3 +1,4 @@
+import CircleInCircle from "../CircleInCircle";
 import "./index.scss";
 
 const TimeLineItem = ({ data }) => (
@@ -10,9 +11,16 @@ const TimeLineItem = ({ data }) => (
       style={{ maxWidth: "100%", width: "400px" }}
     >
       {/* top --> time & date */}
-      <div className="flex flex-row items-center w-full p-3 justify-between">
+      <div
+        className={`w-full p-3 flex items-center justify-between ${
+          data.active === false ? "flex-row-reverse" : "flex-row"
+        }`}
+      >
         {data.active && (
-          <div className="bg-blue-500 border-4 border-[#D4E6FF99] w-4 h-4 rounded-full"></div>
+          <CircleInCircle
+            parentClassName={"bg-blue-500"}
+            childClassName={"bg-[#D4E6FF99]"}
+          />
         )}
         <div className="flex flex-row-reverse self-end">
           <time className="text-xs text-[#0A7C9F]">{data.date}</time>

src/components/TimeLineComponent/data.js

@@ -80,7 +80,7 @@ const data = [
     date: "1400/12/28",
     time: " 14:30",
     text: "انجام عملیات بازگردانی و ذخیره سازی",
-    active: true,
+    active: false,
     content: `
     جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت
 پایان جنگ ایران و عراق هم ‌زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بین‌المللی گردید