main
alireza khaji 2 years ago
parent 7091617c7f
commit cc92bba036
  1. BIN
      src/assets/img/pankaj-patel-_SgRNwAVNKw-unsplash.jpg
  2. BIN
      src/assets/img/rhema-kallianpur-2W3bDp7K1oQ-unsplash.jpg
  3. 99
      src/view/my-services/MyCourse.js
  4. 132
      src/view/my-services/MyOrders.js
  5. 6
      src/view/my-services/MyServices.js

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

@ -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;

@ -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;

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

Loading…
Cancel
Save