generated from dwd/boilarplate-remix-tailwind-antd
54 lines
2.1 KiB
TypeScript
54 lines
2.1 KiB
TypeScript
let knowledgeData = [
|
|
{
|
|
id: "1",
|
|
status: "1",
|
|
title: "Assessment on Special Education",
|
|
challenge: "Challenge yourself & climb the leaderboard.",
|
|
question: "Subjective Question",
|
|
img: "../../assets/knowledge1.jpg"
|
|
},
|
|
{
|
|
id: "2",
|
|
status: "1",
|
|
title: "Quiz on Children Psychology",
|
|
challenge: "Challenge yourself & climb the leaderboard.",
|
|
question: "MCQ",
|
|
img: "../../assets/knowledge2.jpg"
|
|
},
|
|
{
|
|
id: "3",
|
|
status: "1",
|
|
title: "Quiz on Montessori Methods",
|
|
challenge: "Challenge yourself & climb the leaderboard.",
|
|
question: "MCQ",
|
|
img: "../../assets/knowledge3.jpg"
|
|
}
|
|
];
|
|
|
|
export default function(){
|
|
return(
|
|
<section className=''>
|
|
<div className=''>
|
|
<div className=''>
|
|
<h2 className='text-[20px] font-[700] inline-flex p-6'>Knowledge Quests <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
|
<div className='flex flex-col gap-6'>
|
|
{knowledgeData.map(data => (
|
|
<div key={data.id} className='flex flex-row justify-between px-6 place-items-center'>
|
|
<div className='flex flex-row justify-between gap-6'>
|
|
<img src={data.img} alt="" />
|
|
<div className='flex flex-col space-y-3'>
|
|
<h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
|
|
<p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
|
|
<p className='text-[14px] font-[600] text-[#9D9D9D]'>{data.question}</p>
|
|
</div>
|
|
</div>
|
|
<button className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Start</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
)
|
|
} |