myRegisters

main
alireza khaji 2 years ago
parent a92fadd4b3
commit 7091617c7f
  1. 5
      src/App.css
  2. 90
      src/view/my-services/FutureExams.js
  3. 86
      src/view/my-services/MyRegisters.js
  4. 9
      src/view/my-services/MyServices.js
  5. 68
      src/view/my-services/ResultExams.js

@ -19,17 +19,18 @@ input::-webkit-inner-spin-button {
::-webkit-scrollbar {
width: 5px;
background: #dbdbdb;
border-radius: 20px;
}
/* Track */
::-webkit-scrollbar-track {
border-radius: 10px;
border-radius: 20px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #df1452;
border-radius: 10px;
border-radius: 20px;
}
/* Handle on hover */

@ -74,59 +74,61 @@ const FutureExams = () => {
};
return (
<div className="FutureExams w-[55%] h-full border-l border-[#E0E0E0] px-4 pt-4 overflow-y-auto">
{/* ----title-------- */}
<Title titleText="آزمونهای پیشرو" />
{/* ----body-------- */}
<div className="w-full mt-4 flex flex-row-reverse items-start gap-x-[3.5%] gap-y-4 flex-wrap pb-2">
{data?.map((item, index) => (
<div
key={index}
className="w-[31%] aspect-square rounded overflow-hidden relative cursor-pointer"
onMouseEnter={() => hoverHandler(index)}
onMouseLeave={() => hoverHandle2(index)}
>
{/* -----back-img------ */}
<img src={item.img} className="w-full" alt="back-img" />
{/* -----front-data------ */}
<div className="FutureExams w-[55%] h-full border-l 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 flex flex-row-reverse items-start gap-x-[3.5%] gap-y-4 flex-wrap pb-2">
{data?.map((item, index) => (
<div
className="frontBox w-full h-full absolute top-0 left-0 p-3 translate-y-[60%] transition-all duration-300"
style={{
background:
"linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)",
}}
key={index}
className="w-[31%] aspect-square rounded overflow-hidden relative cursor-pointer"
onMouseEnter={() => hoverHandler(index)}
onMouseLeave={() => hoverHandle2(index)}
>
<div className="w-full flex items-center flex-row-reverse pb-1 border-b border-white">
<img src={stickynote} alt="stickynote" className="h-5 ml-1" />
<div
className="text-xs text-white text-right overflow-hidden text-ellipsis whitespace-nowrap"
style={{ direction: "rtl" }}
>
{item.title}
{/* -----back-img------ */}
<img src={item.img} className="w-full" alt="back-img" />
{/* -----front-data------ */}
<div
className="frontBox w-full h-full absolute top-0 left-0 p-3 translate-y-[60%] transition-all duration-300"
style={{
background:
"linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)",
}}
>
<div className="w-full flex items-center flex-row-reverse pb-1 border-b border-white">
<img src={stickynote} alt="stickynote" className="h-5 ml-1" />
<div
className="text-xs text-white text-right overflow-hidden text-ellipsis whitespace-nowrap"
style={{ direction: "rtl" }}
>
{item.title}
</div>
</div>
</div>
{/* ----------- */}
<div className="w-full flex flex-row-reverse items-center justify-between py-1">
<div className="flex flex-row-reverse items-center">
<img src={clockIcon} alt="clockIcon" className="ml-1 h-4" />
{/* ----------- */}
<div className="w-full flex flex-row-reverse items-center justify-between py-1">
<div className="flex flex-row-reverse items-center">
<img src={clockIcon} alt="clockIcon" className="ml-1 h-4" />
<div className="text-xs text-white text-right">
{item.date}
</div>
</div>
<div className="text-xs text-white text-right">
{item.date}
ساعت {item.time}
</div>
</div>
<div className="text-xs text-white text-right">
ساعت {item.time}
{/* ----------- */}
<div
className="frontBox-description text-xs text-white text-right pt-1 border-t border-white hidden"
style={{ direction: "rtl" }}
>
{item.description}
</div>
</div>
{/* ----------- */}
<div
className="frontBox-description text-xs text-white text-right pt-1 border-t border-white hidden"
style={{ direction: "rtl" }}
>
{item.description}
</div>
</div>
</div>
))}
))}
</div>
</div>
</div>
);

@ -0,0 +1,86 @@
import Title from "./Title";
let data = [
{
id: 1,
factorId: "ABC12345",
name: "کلاس حضوری فیزیک کوآنتوم",
date: "1401/3/3",
type: 1,
},
{
id: 2,
factorId: "ABC12345",
name: "کلاس حضوری فیزیک کوآنتوم",
date: "1401/3/3",
type: 2,
},
{
id: 3,
factorId: "ABC12345",
name: "کلاس حضوری فیزیک کوآنتوم",
date: "1401/3/3",
type: 3,
},
{
id: 4,
factorId: "ABC12345",
name: "کلاس حضوری فیزیک کوآنتوم",
date: "1401/3/3",
type: 4,
},
{
id: 5,
factorId: "ABC12345",
name: "کلاس حضوری فیزیک کوآنتوم",
date: "1401/3/3",
type: 1,
},
];
const MyRegisters = () => {
return (
<div className="MyRegisters w-[53%] 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 border-t border-[#E0E0E0] mb-5">
<div className="w-full py-1" style={{ direction: "rtl" }}>
<div className="w-fit pl-3 border-l border-[#E0E0E0] text-xs text-right">
{item.factorId}
</div>
</div>
{/* ------ */}
<div className="w-full py-1 flex flex-row-reverse items-center justify-between border-t border-[#E0E0E0]">
<div
className="w-1/2 text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap"
style={{ fontFamily: "IRANSansXFaNum-Medium" }}
>
{item.name}
</div>
{/* -- */}
<div className="w-[30%] pr-2 text-right text-xs text-[#B1B1B1] border-r border-[#E0E0E0]">
{item.date}
</div>
{/* -- */}
<div className="w-1/4 h-6 rounded flex items-center justify-center bg-[#DF1452] text-xs text-white text-center cursor-pointer">
{item.type === 1
? "شرکت در دوره"
: item.type === 2
? "مکان برگزاری"
: item.type === 3
? "دریافت قرارداد"
: "شرکت در آزمون"}
</div>
</div>
</div>
))}
</div>
</div>
</div>
);
};
export default MyRegisters;

@ -1,14 +1,19 @@
import Exams from "./Exams";
import MyRegisters from "./MyRegisters";
const MyServices=()=>{
return (
<div className="MyServices w-[93.5%] h-[100vh] pt-[4%] 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">
<Exams/>
</div>
<div className="MyServices-row w-full h-[48%] flex flex-row-reverse justify-between"></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/>
</div>
</div>
</div>
);
}

@ -60,46 +60,48 @@ const ResultExams = () => {
];
return (
<div
className="ResultExams w-[45%] h-full px-4 pt-4 overflow-y-auto"
className="ResultExams w-[45%] h-full px-1 pt-1"
style={{ direction: "rtl" }}
>
{/* ----title-------- */}
<div style={{ direction: "ltr" }}>
<Title titleText="نتایج آزمونهای من" />
</div>
{/* ----body-------- */}
<div className="w-full mt-4">
{data?.map((item, index) => (
<div
key={index}
className="w-full h-14 rounded px-3 flex items-center justify-between mb-2 cursor-pointer"
style={{ backgroundColor: `${colorList[index % 5].bg}` }}
>
<div className="w-full h-full px-4 pt-4 overflow-y-auto">
{/* ----title-------- */}
<div style={{ direction: "ltr" }}>
<Title titleText="نتایج آزمونهای من" />
</div>
{/* ----body-------- */}
<div className="w-full mt-4">
{data?.map((item, index) => (
<div
className="w-1 h-9 rounded-lg"
style={{ backgroundColor: `${colorList[index % 5].line}` }}
></div>
{/* --------- */}
<div className="w-[70%]">
key={index}
className="w-full h-14 rounded px-3 flex items-center justify-between mb-2 cursor-pointer"
style={{ backgroundColor: `${colorList[index % 5].bg}` }}
>
<div
className="w-full text-sm text-right"
style={{ fontFamily: "IRANSansXFaNum-Medium" }}
>
{item?.title}
className="w-1 h-9 rounded-lg"
style={{ backgroundColor: `${colorList[index % 5].line}` }}
></div>
{/* --------- */}
<div className="w-[70%]">
<div
className="w-full text-sm text-right"
style={{ fontFamily: "IRANSansXFaNum-Medium" }}
>
{item?.title}
</div>
<div className="w-full text-xs text-[#B1B1B1] text-right mt-[2px]">
{item?.date}
</div>
</div>
<div className="w-full text-xs text-[#B1B1B1] text-right mt-[2px]">
{item?.date}
{/* --------- */}
<div
className="w-[15%] h-9 text-center border-r text-xs flex items-center"
style={{ borderColor: `${colorList[index % 5].line}` }}
>
{item.status === 1 ? "نتیجه موقت" : "نتیجه نهایی"}
</div>
</div>
{/* --------- */}
<div
className="w-[15%] h-9 text-center border-r text-xs flex items-center"
style={{ borderColor: `${colorList[index % 5].line}` }}
>
{item.status === 1 ? "نتیجه موقت" : "نتیجه نهایی"}
</div>
</div>
))}
))}
</div>
</div>
</div>
);

Loading…
Cancel
Save