update

src/App.js

@@ -63,6 +63,8 @@ import PopupCard from "./components/PopupCard";
 import OutlineInput from "./components/OutlineInput";
 import CancleIcon from "./components/CancleIcon";
 import ButtonNewDesign from "./components/ButtonNewDesign";
+import TimeLine from "./components/TimeLine";
+import TitleSubtitle from "./components/TitleSubtitle";
 
 // import Digikala from "./components/Digikala/ImageSlider";
 
@@ -98,7 +100,7 @@ function App() {
         {/* <AdvertisementDesign1 /> */}
         {/* <AdvertisementDesign2 /> */}
         {/* <AdvertisementDesign3 /> */}
-        <CourseChapter />
+        {/* <CourseChapter /> */}
         {/* <SidebarMenu /> */}
         {/* <SimpleBarChart /> */}
         {/* <SpecifiedDomainRadarChart /> */}
@@ -121,6 +123,7 @@ function App() {
         {/* <BreadCrumb /> */}
         {/* <SearchBox /> */}
         {/* <FileManager /> */}
+        {/* <TitleSubtitle /> */}
         {/* <Playlist /> */}
         {/* <Folderlists /> */}
         {/* <Blogs /> */}
@@ -134,6 +137,7 @@ function App() {
         {/* <FolderTree /> */}
         {/* <GridListTable /> */}
         <PopupCard />
+        <TimeLine />
         {/* <SidebarDesign2 className="w-1/5" /> */}
       </div>
     </Provider>

src/components/PopupCard/index.js

@@ -18,6 +18,10 @@ const PopupCard = ({ selectedChecklist }) => {
 
   return (
     <section className="">
+      <p>
+        به دایره های ابی وقتی که پاپ اپ باز میشود لطفا نگاه نکنید مربوط به تسک
+        بعدی است
+      </p>
       <button
         className="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
         type="button"

src/components/SearchBox/index.js

@@ -13,7 +13,7 @@ const SearchBox = ({
 }) => {
   const [activeSearchBox, setActiveSearchBox] = useState(false);
   return (
-    <div className="flex flex-row-reverse items-center relative ml-2 ">
+    <div className={`flex flex-row-reverse items-center relative ml-2`}>
       {activeSearchBox && (
         <img
           src={cancleIcon}

src/components/TimeLine/TimeLineItem.js

@@ -0,0 +1,35 @@
+import "./index.scss";
+
+const TimeLineItem = ({ data }) => (
+  <div
+    className="timeline-item flex flex-row mt-5 w-1/2 justify-end"
+    style={{ paddingLeft: "30px" }}
+  >
+    <div
+      className="timeline-item-content relative bg-white rounded shadow-md flex flex-col items-end border border-[#D6D6D6] "
+      style={{ maxWidth: "70%", width: "400px" }}
+    >
+      <div className="flex flex-row-reverse gap-x-2 p-3">
+        <time className="text-xs text-[#0A7C9F]">{data.date}</time>
+        <span className="text-xs text-[#0A7C9F]"> - </span>
+        <time className="text-xs text-[#0A7C9F]">{data.time}</time>{" "}
+      </div>
+      {/* <div className="flex flex-row-reverse items-center justify-between w-full">
+        <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">
+        <p className="text-right text-sm font-bold text-[#00253A]">
+          {data.text}
+        </p>
+      </div>
+      <p className="text-xs text-justify px-4 text-[#00253A99] text-light leading-6">
+        {data.content}
+      </p>
+      <span className="circle"></span>
+    </div>
+  </div>
+);
+
+export default TimeLineItem;

src/components/TimeLine/Timeline.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+import timeLineData from "./data.js";
+import TimeLineItem from "./TimeLineItem.js";
+
+const TimeLine = () =>
+  timeLineData.length > 0 && (
+    <div className="timeline-container flex flex-col relative bg-white">
+      {timeLineData.slice(0, 3).map((data, idx) => (
+        <TimeLineItem data={data} key={idx} />
+      ))}
+    </div>
+  );
+
+export default TimeLine;

src/components/TimeLine/data.js

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

src/components/TimeLine/gray-search-icon.svg

@@ -0,0 +1,7 @@
+<svg id="vuesax_linear_search-normal" data-name="vuesax/linear/search-normal" xmlns="http://www.w3.org/2000/svg" width="26.075" height="26.075" viewBox="0 0 26.075 26.075">
+  <g id="search-normal">
+    <path id="Vector" d="M20.642,10.321A10.321,10.321,0,1,1,10.321,0,10.321,10.321,0,0,1,20.642,10.321Z" transform="translate(2.173 2.173)" fill="none" stroke="#dbdbdb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M2.173,2.173,0,0" transform="translate(21.729 21.729)" fill="none" stroke="#dbdbdb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H26.075V26.075H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>

src/components/TimeLine/index.js

@@ -0,0 +1,21 @@
+import React from "react";
+import SearchBox from "../SearchBox";
+import TitleSubtitle from "../TitleSubtitle";
+
+import Timeline from "./Timeline.js";
+
+import search from "./gray-search-icon.svg";
+
+const TimeLine = ({ data }) => {
+  return (
+    <div className="px-10 py-4 mx-auto ">
+      <div className="flex flex-row items-center justify-between">
+        <TitleSubtitle />
+        <SearchBox inputWidth={"100%"} searchIcon={search} borderClr="#ddd" />
+      </div>
+      <Timeline />
+    </div>
+  );
+};
+
+export default TimeLine;

src/components/TimeLine/index.scss

@@ -0,0 +1,84 @@
+#root {
+  width: 100%;
+}
+
+.timeline-container::after {
+  background-color: #06bace;
+  content: "";
+  position: absolute;
+  right: calc(50% - 2px);
+  width: 4px;
+  height: 100%;
+}
+
+.timeline-item:nth-child(odd) {
+  align-self: flex-end;
+  justify-content: flex-start;
+  padding-right: 30px;
+  padding-left: 0px;
+}
+
+.timeline-item-content::after {
+  content: "";
+  background-color: #fff;
+  box-shadow: -1px 1px 1px rgba(0, 0, 0.2);
+  width: 15px;
+  height: 15px;
+  position: absolute;
+  transform: rotate(45deg);
+  left: -7.5px;
+  top: calc(50% - 7.5px);
+}
+
+.timeline-item:nth-child(odd) .timeline-item-content {
+  align-items: flex-start;
+  text-align: left;
+}
+
+.timeline-item:nth-child(odd) .timeline-item-content::after {
+  box-shadow: 1px -1px 1px rgba(0, 0, 0.2);
+  left: auto;
+  right: -7.5px;
+}
+
+.timeline-item-content .circle {
+  background-color: #06bace;
+  border: solid 4px #fff;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: calc(50% - 10px);
+  left: -40px;
+  z-index: 100;
+}
+
+.timeline-item:nth-child(odd) .timeline-item-content .circle {
+  left: auto;
+  right: -40px;
+}
+
+@media only screen and (max-width: 767px) {
+  .timeline-item-content,
+  .timeline-item:nth-child(odd) .timeline-item-content {
+    padding: 15px 10px;
+    text-align: center !important;
+    align-items: center !important;
+  }
+
+  .timeline-item-content .tag {
+    width: calc(100% - 10px);
+  }
+
+  .timeline-item-content time {
+    margin-top: 20px;
+  }
+
+  .timeline-item-content a {
+    text-decoration: underline;
+  }
+
+  .timeline-item-content a::after {
+    display: none;
+  }
+}