MyOrders

src/view/my-services/MyCourse.js

@@ -0,0 +1,99 @@
+import Title from "./Title";
+import img1 from "../../assets/img/rhema-kallianpur-2W3bDp7K1oQ-unsplash.jpg";
+import img2 from "../../assets/img/pankaj-patel-_SgRNwAVNKw-unsplash.jpg";
+let data = [
+  {
+    id: 1,
+    name: "صفر تا صد javascript",
+    date: "1401/3/3",
+    img: img1,
+    description:
+      "ما در این دوره از پایه‌ای ترین مفاهیم javascript شروع خواهیم کرد و رفته رفته به سمت مطالب حرفه‌ای تر حرکت میکنیم.",
+    teacher: "فرانت‌کار عجیب",
+  },
+  {
+    id: 2,
+    name: "صفر تا صد javascript",
+    date: "1401/3/3",
+    img: img2,
+    description:
+      "ما در این دوره از پایه‌ای ترین مفاهیم javascript شروع خواهیم کرد و رفته رفته به سمت مطالب حرفه‌ای تر حرکت میکنیم.",
+    teacher: "فرانت‌کار عجیب",
+  },
+  {
+    id: 3,
+    name: "صفر تا صد javascript",
+    date: "1401/3/3",
+    img: img1,
+    description:
+      "ما در این دوره از پایه‌ای ترین مفاهیم javascript شروع خواهیم کرد و رفته رفته به سمت مطالب حرفه‌ای تر حرکت میکنیم.",
+    teacher: "فرانت‌کار عجیب",
+  },
+  {
+    id: 4,
+    name: "صفر تا صد javascript",
+    date: "1401/3/3",
+    img: img2,
+    description:
+      "ما در این دوره از پایه‌ای ترین مفاهیم javascript شروع خواهیم کرد و رفته رفته به سمت مطالب حرفه‌ای تر حرکت میکنیم.",
+    teacher: "فرانت‌کار عجیب",
+  },
+];
+const MyCourse=()=>{
+  return (
+    <div className="MyCourse w-[45%] h-full rounded-lg border border-[#E0E0E0] px-1 pt-1">
+      <div className="w-full h-full overflow-y-auto px-4 pt-4">
+        {/* ----title-------- */}
+        <Title titleText="دوره‌های من" />
+        {/* ----body-------- */}
+        <div className="w-full mt-4">
+          {data?.map((item, index) => (
+            <div className="w-full flex flex-row-reverse items-center justify-between mb-4 cursor-pointer">
+              <div className="w-[37%] aspect-[1/0.7] rounded overflow-hidden flex items-center justify-center">
+                <img
+                  src={item.img}
+                  alt="course-banner"
+                  className="w-full rounded"
+                />
+              </div>
+              {/* ---- */}
+              <div className="w-[61%]">
+                <div className="text-xs text-right text-[#B1B1B1]">
+                  {item?.date}
+                </div>
+                <div
+                  className="text-sm text-right mt-1"
+                  style={{
+                    fontFamily: "IRANSansXFaNum-Medium",
+                    direction: "rtl",
+                  }}
+                >
+                  {item.name}
+                </div>
+                <div
+                  className="text-xs text-right text-[#B1B1B1] mt-1 overflow-hidden text-ellipsis"
+                  style={{
+                    WebkitLineClamp: "2",
+                    WebkitBoxOrient: "vertical",
+                    display: "-webkit-box",
+                    direction:"rtl"
+                  }}
+                >
+                  {item.description}
+                </div>
+                <div
+                  className="text-left text-xs w-full mt-1"
+                  style={{ direction: "ltr" }}
+                >
+                  استاد:{item?.teacher}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default MyCourse;

src/view/my-services/MyOrders.js

@@ -0,0 +1,132 @@
+import Title from "./Title";
+
+let data = [
+  {
+    id: 1,
+    factorId: "ABC12345",
+    date: "1401/3/3",
+    status: 1,
+    sumPrice: 100000,
+    products: [
+      {
+        id: 100,
+        img: "",
+      },
+      {
+        id: 101,
+        img: "",
+      },
+    ],
+  },
+  {
+    id: 2,
+    factorId: "ABC12345",
+    date: "1401/3/3",
+    status: 2,
+    sumPrice: 100000,
+    products: [
+      {
+        id: 100,
+        img: "",
+      },
+      {
+        id: 101,
+        img: "",
+      },
+    ],
+  },
+  {
+    id: 3,
+    factorId: "ABC12345",
+    date: "1401/3/3",
+    status: 3,
+    sumPrice: 100000,
+    products: [
+      {
+        id: 100,
+        img: "",
+      },
+      {
+        id: 101,
+        img: "",
+      },
+    ],
+  },
+  {
+    id: 4,
+    factorId: "ABC12345",
+    date: "1401/3/3",
+    status: 1,
+    sumPrice: 100000,
+    products: [
+      {
+        id: 100,
+        img: "",
+      },
+      {
+        id: 101,
+        img: "",
+      },
+    ],
+  },
+];
+let statusColor = ["#F7EA46", "#57F746", "#FE1E1E"];
+const MyOrders = () => {
+  return (
+    <div className="MyOrders w-[28.5%] h-full rounded-lg border border-[#E0E0E0] px-1 pt-1">
+      <div className="w-full h-full overflow-y-auto px-4 pt-4">
+        {/* ----title-------- */}
+        <Title titleText="سفارش‌های من" />
+        {/* ----body-------- */}
+        <div className="w-full mt-4">
+          {data.map((item, index) => (
+            <div key={index} className="w-full mb-5">
+              <div className="w-full flex flex-row-reverse items-center justify-between py-1 border-y border-[#E0E0E0]">
+                <div className="w-[40%] pl-1 text-right text-xs border-l border-[#E0E0E0]">
+                  {item.factorId}
+                </div>
+                <div className="w-[22%] text-right text-xs">{item.date}</div>
+                <div className="w-[30%] flex flex-row-reverse items-center">
+                  <div
+                    className="w-4 h-4 rounded-full bg-black"
+                    style={{
+                      backgroundColor: `${statusColor[item.status - 1]}`,
+                    }}
+                  ></div>
+                  <div className="text-xs text-left mr-1">
+                    {item.status === 1
+                      ? "در حال پردازش"
+                      : item.status === 2
+                      ? "تکمیل شده"
+                      : "کنسل شده"}
+                  </div>
+                </div>
+              </div>
+              {/* ---------- */}
+              <div className="w-full flex flex-row-reverse justify-between pt-1">
+                <div className="w-[60%] flex flex-row-reverse items-start gap-x-2 gap-y-2 flex-wrap">
+                  {item.products.map((ITEM, INDEX) => (
+                    <div
+                      key={INDEX}
+                      className="w-10 h-16 rounded bg-[#E0E0E0] overflow-hidden flex items-center justfy-center"
+                    ></div>
+                  ))}
+                </div>
+                <div className="w-[37%]">
+                  <div className="w-full text-left text-xs">
+                    جمع فاکتور {item.sumPrice} تومان
+                  </div>
+                  <div className="w-full h-7 rounded flex items-center justify-center text-xs text-center text-white bg-[#DF1452] mt-2 cursor-pointer">
+                    جزئیات سفارش
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MyOrders;

src/view/my-services/MyServices.js

@@ -1,4 +1,6 @@
 import Exams from "./Exams";
+import MyCourse from "./MyCourse";
+import MyOrders from "./MyOrders";
 import MyRegisters from "./MyRegisters";
 
 
@@ -6,13 +8,15 @@ import MyRegisters from "./MyRegisters";
 const MyServices=()=>{
   return (
     <div className="MyServices w-[93.5%] h-[100vh] pt-[4%] pb-2 px-4 flex flex-col justify-between">
-      <div className="MyServices-row w-full h-[48%] flex flex-row-reverse justify-between">
+      <div className="MyServices-row w-full h-[49%] flex flex-row-reverse justify-between">
         <Exams/>
       </div>
       <div className="MyServices-row w-full h-[48%] flex flex-row-reverse justify-between">
         <div className="w-[70%] h-full flex flex-row-reverse justify-between">
           <MyRegisters/>
+          <MyCourse/>
         </div>
+        <MyOrders/>
       </div>
     </div>
   );