generated from dwd/boilarplate-remix-tailwind-antd
s1
This commit is contained in:
Suvodip
133
app/components/TheoryCourses.tsx
Normal file
133
app/components/TheoryCourses.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
type TheoryData = {
|
||||
id: number;
|
||||
module: number;
|
||||
status: number;
|
||||
time: number;
|
||||
access: number;
|
||||
title: string;
|
||||
description: string;
|
||||
img: string;
|
||||
total_marks: string;
|
||||
};
|
||||
|
||||
let theoryData: TheoryData[] = [
|
||||
{
|
||||
id: 1,
|
||||
module: 1,
|
||||
status: 2,
|
||||
time: 4,
|
||||
access: 1,
|
||||
title: "Life History of Dr. Maria Montessori",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
img: "/assets/image1.jpg",
|
||||
total_marks: "50"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
module: 2,
|
||||
status: 1,
|
||||
time: 4,
|
||||
access: 1,
|
||||
title: "Introduction to Montessori Methods",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
img: "/assets/image2.jpg",
|
||||
total_marks: "50"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
module: 3,
|
||||
status: 0,
|
||||
time: 4,
|
||||
access: 0,
|
||||
title: "Exercises in Practical Life",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
img: "/assets/image3.jpg",
|
||||
total_marks: "50"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
module: 1,
|
||||
status: 0,
|
||||
time: 4,
|
||||
access: 0,
|
||||
title: "Life History of Dr. Maria Montessori",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
img: "/assets/image1.jpg",
|
||||
total_marks: "50"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
module: 2,
|
||||
status: 0,
|
||||
time: 4,
|
||||
access: 0,
|
||||
title: "Introduction to Montessori Methods",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
img: "/assets/image2.jpg",
|
||||
total_marks: "50"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
module: 3,
|
||||
status: 0,
|
||||
time: 4,
|
||||
access: 0,
|
||||
title: "Exercises in Practical Life",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
img: "/assets/image3.jpg",
|
||||
total_marks: "50"
|
||||
}
|
||||
];
|
||||
|
||||
export default function CourseTheory() {
|
||||
const getStatusText = (status: number): string => {
|
||||
if (status === 2) return "<p style='color: #218B32; font-weight: 600; font-size: 18px; display: inline-flex;'><img style='margin-right: 8px;' src='/assets/green-tick.svg' />Finished</p>";
|
||||
if (status === 1) return "<p style='color: #EF7A0C; font-weight: 600; font-size: 18px' >40% Completed</p>";
|
||||
if (status === 0) return " ";
|
||||
return "";
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<section className="container mx-auto p-4 px-10">
|
||||
<div className="flex flex-row justify-between place-items-center rounded-[10px]" style={{background: 'linear-gradient(90.65deg, #4377C6 0%, #3B70C0 100%)'}}>
|
||||
<div className="flex flex-row h-[107px] place-items-center p-4 space-x-6">
|
||||
<div className="relative inline-block">
|
||||
<img className="h-[81px] w-[137px] rounded-[10px]" src="/assets/image3.jpg" alt="" />
|
||||
<button className="absolute inset-0 m-auto h-10 w-10">
|
||||
<img src="/assets/play.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="">
|
||||
<h2 className="tet-[18px] font-[700] text-[#FFF] w-[328px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
|
||||
<p className="text-[14px] font-[600] text-[#EF7A0C]">
|
||||
<span> Video</span> |
|
||||
<span> 30 mins</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pr-4">
|
||||
<button className="bg-[#FFF] text-[#000] font-[600] px-6 py-2 text-[18px] rounded-[8px]">Continue Learning</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 p-6 gap-10 ">
|
||||
{
|
||||
theoryData.map((data, index) => (
|
||||
<div key={index} className={`border-[1px] border-[#218B32] p-3 rounded-[10px] ${data.access === 0 ? 'contrast-[0.3]' : ''} `}>
|
||||
<img className="w-full rounded-[8px]" src={data.img} alt="" />
|
||||
<h2 className="text-[18px] font-[700]">{data.title}</h2>
|
||||
<p className="text-[14px] font-[700] text-[#EF7A0C] py-2"><span>{data.time} Hours</span> | <span>Net Total Marks {data.total_marks}</span></p>
|
||||
<p className="text-[14px] font-[500] text-[#6E6E6E] pb-6">{data.description}</p>
|
||||
<div className="flex flex-row justify-between place-items-center">
|
||||
<button disabled={data.access === 0} className={`text-[18px] font-[600] bg-[#000] rounded-[8px] px-[50px] py-2 text-[#fff] ${data.access == 0 ? 'cursor-not-allowed' : ''}`}>{data.access === 0 ? 'Locked' : 'View'}</button> <div dangerouslySetInnerHTML={{ __html: getStatusText(data.status) }} />
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user