diff --git a/src/assets/img/pankaj-patel-_SgRNwAVNKw-unsplash.jpg b/src/assets/img/pankaj-patel-_SgRNwAVNKw-unsplash.jpg new file mode 100644 index 0000000..2c7d5e7 Binary files /dev/null and b/src/assets/img/pankaj-patel-_SgRNwAVNKw-unsplash.jpg differ diff --git a/src/assets/img/rhema-kallianpur-2W3bDp7K1oQ-unsplash.jpg b/src/assets/img/rhema-kallianpur-2W3bDp7K1oQ-unsplash.jpg new file mode 100644 index 0000000..3df7de5 Binary files /dev/null and b/src/assets/img/rhema-kallianpur-2W3bDp7K1oQ-unsplash.jpg differ diff --git a/src/view/my-services/MyCourse.js b/src/view/my-services/MyCourse.js new file mode 100644 index 0000000..7b0c1f8 --- /dev/null +++ b/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 ( +
+
+ {/* ----title-------- */} + + {/* ----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; \ No newline at end of file diff --git a/src/view/my-services/MyOrders.js b/src/view/my-services/MyOrders.js new file mode 100644 index 0000000..de41f1c --- /dev/null +++ b/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; diff --git a/src/view/my-services/MyServices.js b/src/view/my-services/MyServices.js index bbb3bd8..b944c93 100644 --- a/src/view/my-services/MyServices.js +++ b/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> );