generated from dwd/boilarplate-remix-tailwind-antd
s1
This commit is contained in:
Suvodip
45
app/components/ContinueLearning.tsx
Normal file
45
app/components/ContinueLearning.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
let courseData = [
|
||||
{
|
||||
id : "1",
|
||||
title : "Life History of Dr. Maria Montessori",
|
||||
chapter : "1",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course1.jpg"
|
||||
},
|
||||
{
|
||||
id : "2",
|
||||
title : "Introduction to Montessori Methods",
|
||||
chapter : "2",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course2.jpg"
|
||||
},
|
||||
{
|
||||
id : "3",
|
||||
title : "Exercises on Practical Life",
|
||||
chapter : "3",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course3.jpg"
|
||||
}
|
||||
];
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<section className='bg-[#FCFCFC]'>
|
||||
<div className='container mx-auto'>
|
||||
<h2 className='text-[20px] font-[700] my-4 inline-flex leading-[24px]'>Continue Learning <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
|
||||
{courseData.map(data=>(
|
||||
<div key={data.id} className=''>
|
||||
<img className='w-full rounded-[10px]' src={data.img} alt="" />
|
||||
<h2 className='text-[16px] font-[700] my-2'>{data.title}</h2>
|
||||
<p className='text-[14px] font-[500] text-[#6E6E6E]'>
|
||||
<span>Chapter {data.chapter}</span> •
|
||||
<span>{data.Program}</span>
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -698,7 +698,7 @@ const App: React.FC = () => {
|
||||
<div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
|
||||
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='mx-auto h-[52px] w-[60px] ' src={secondHighestRank.avatar} alt="" />
|
||||
<img className='mx-auto h-[52px] w-[60px] ' src={`../../assets/${secondHighestRank.avatar}`} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth2.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
|
||||
@@ -707,7 +707,7 @@ const App: React.FC = () => {
|
||||
<div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='-mt-10' src="../../assets/crown.png" alt="" />
|
||||
<img className='mx-auto h-[52px] w-[60px]' src={highestRank.avatar} alt="" />
|
||||
<img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${highestRank.avatar}`} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
|
||||
@@ -715,7 +715,7 @@ const App: React.FC = () => {
|
||||
</div>
|
||||
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='mx-auto h-[52px] w-[60px]' src={thirdHighestRank.avatar} alt="" />
|
||||
<img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${thirdHighestRank.avatar}`} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth3.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
|
||||
@@ -726,7 +726,7 @@ const App: React.FC = () => {
|
||||
{sortedData.slice(3).map(data => (
|
||||
<div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2 hover:bg-[#FDF2E7] duration-700'>
|
||||
<p className='text-[11px] font-[700]'># {data.rank}</p>
|
||||
<img className='w-[35px] h-[35px]' src={data.avatar} alt="" />
|
||||
<img className='w-[35px] h-[35px]' src={`../../assets/${data.avatar}`} alt="" />
|
||||
<div>
|
||||
<p className='text-[14px] font-[700]'>{data.name}</p>
|
||||
<p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
|
||||
|
||||
169
app/components/KnowledgeQuests.tsx
Normal file
169
app/components/KnowledgeQuests.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
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"
|
||||
}
|
||||
];
|
||||
|
||||
let performersData = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Eiden",
|
||||
score: "48/50",
|
||||
points: "999",
|
||||
rank: "1",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jackson",
|
||||
score: "45/50",
|
||||
points: "997",
|
||||
rank: "2",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emma Aria",
|
||||
score: "43/50",
|
||||
points: "994",
|
||||
rank: "3",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "John Doe",
|
||||
score: "40/50",
|
||||
points: "990",
|
||||
rank: "4",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jane Cooper",
|
||||
score: "37/50",
|
||||
points: "987",
|
||||
rank: "5",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "John Doe",
|
||||
score: "35/50",
|
||||
points: "982",
|
||||
rank: "6",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar6.png"
|
||||
}
|
||||
];
|
||||
|
||||
const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));
|
||||
|
||||
const highestRank = sortedData[0];
|
||||
const secondHighestRank = sortedData[1];
|
||||
const thirdHighestRank = sortedData[2];
|
||||
|
||||
console.log('The highest rank is:', highestRank);
|
||||
console.log('The second highest rank is:', secondHighestRank);
|
||||
console.log('The Third highest rank is:', thirdHighestRank);
|
||||
|
||||
|
||||
|
||||
export default function(){
|
||||
return(
|
||||
<section className='container mx-auto my-16'>
|
||||
<div className='grid grid-cols-1 xl:grid-cols-7 gap-y-6 border-[1px] border-[#CFCFCF]'>
|
||||
<div className='xl:col-span-5 border-r-[1px] border-[#CFCFCF]'>
|
||||
<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 className='xl:col-span-2'>
|
||||
<h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>Top Performers <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
||||
<p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p>
|
||||
<div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
|
||||
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='mx-auto h-[52px] w-[60px] ' src={`../../assets/${secondHighestRank.avatar}`} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth2.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{secondHighestRank.score}</p>
|
||||
</div>
|
||||
<div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='-mt-10' src="../../assets/crown.png" alt="" />
|
||||
<img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${highestRank.avatar}`} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{highestRank.score}</p>
|
||||
</div>
|
||||
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${thirdHighestRank.avatar}`} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth3.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
{sortedData.slice(3).map(data => (
|
||||
<div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2'>
|
||||
<p className='text-[11px] font-[700]'># {data.rank}</p>
|
||||
<img className='w-[35px] h-[35px]' src={`../../assets/${data.avatar}`} alt="" />
|
||||
<div>
|
||||
<p className='text-[14px] font-[700]'>{data.name}</p>
|
||||
<p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
|
||||
</div>
|
||||
<div className='flex flex-col justify-center place-items-center'>
|
||||
<img src="../../assets/points-icon.svg" alt="" />
|
||||
<p className='text-[10px] font-[700]'>{data.points} Points</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
469
app/components/KnowledgeQuestsPageContent.tsx
Normal file
469
app/components/KnowledgeQuestsPageContent.tsx
Normal file
@@ -0,0 +1,469 @@
|
||||
import {Layout, Menu, theme, Button, Modal, MenuProps, Tabs} from 'antd';
|
||||
import '../../public/assets/knowledge-quest.css';
|
||||
const { TabPane } = Tabs;
|
||||
let performersData = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Eiden",
|
||||
score: "48/50",
|
||||
points: "999",
|
||||
rank: "1",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jackson",
|
||||
score: "45/50",
|
||||
points: "997",
|
||||
rank: "2",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emma Aria",
|
||||
score: "43/50",
|
||||
points: "994",
|
||||
rank: "3",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "John Doe",
|
||||
score: "40/50",
|
||||
points: "990",
|
||||
rank: "4",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jane Cooper",
|
||||
score: "37/50",
|
||||
points: "987",
|
||||
rank: "5",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "John Doe",
|
||||
score: "35/50",
|
||||
points: "982",
|
||||
rank: "6",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar6.png"
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
name: "Alice",
|
||||
score: "33/50",
|
||||
points: "980",
|
||||
rank: "7",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
name: "Bob",
|
||||
score: "32/50",
|
||||
points: "978",
|
||||
rank: "8",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "9",
|
||||
name: "Charlie",
|
||||
score: "30/50",
|
||||
points: "975",
|
||||
rank: "9",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "10",
|
||||
name: "Diana",
|
||||
score: "28/50",
|
||||
points: "972",
|
||||
rank: "10",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "11",
|
||||
name: "Edward",
|
||||
score: "27/50",
|
||||
points: "970",
|
||||
rank: "11",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "12",
|
||||
name: "Fiona",
|
||||
score: "26/50",
|
||||
points: "968",
|
||||
rank: "12",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar6.png"
|
||||
},
|
||||
{
|
||||
id: "13",
|
||||
name: "George",
|
||||
score: "25/50",
|
||||
points: "965",
|
||||
rank: "13",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "14",
|
||||
name: "Hannah",
|
||||
score: "23/50",
|
||||
points: "962",
|
||||
rank: "14",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "15",
|
||||
name: "Ian",
|
||||
score: "22/50",
|
||||
points: "960",
|
||||
rank: "15",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "16",
|
||||
name: "Julia",
|
||||
score: "20/50",
|
||||
points: "957",
|
||||
rank: "16",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "17",
|
||||
name: "Kyle",
|
||||
score: "19/50",
|
||||
points: "955",
|
||||
rank: "17",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "18",
|
||||
name: "Laura",
|
||||
score: "18/50",
|
||||
points: "953",
|
||||
rank: "18",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar6.png"
|
||||
},
|
||||
{
|
||||
id: "19",
|
||||
name: "Michael",
|
||||
score: "17/50",
|
||||
points: "950",
|
||||
rank: "19",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "20",
|
||||
name: "Nancy",
|
||||
score: "16/50",
|
||||
points: "947",
|
||||
rank: "20",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "21",
|
||||
name: "Oliver",
|
||||
score: "15/50",
|
||||
points: "945",
|
||||
rank: "21",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar3.png"
|
||||
}
|
||||
];
|
||||
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"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
status: "1",
|
||||
title: "Assessment on Special Education",
|
||||
challenge: "Challenge yourself & climb the leaderboard.",
|
||||
question: "Subjective Question",
|
||||
img: "../../assets/knowledge1.jpg"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
status: "1",
|
||||
title: "Quiz on Children Psychology",
|
||||
challenge: "Challenge yourself & climb the leaderboard.",
|
||||
question: "MCQ",
|
||||
img: "../../assets/knowledge2.jpg"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
status: "1",
|
||||
title: "Quiz on Montessori Methods",
|
||||
challenge: "Challenge yourself & climb the leaderboard.",
|
||||
question: "MCQ",
|
||||
img: "../../assets/knowledge3.jpg"
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
status: "1",
|
||||
title: "Workshop on Child Development",
|
||||
challenge: "Expand your knowledge & earn badges.",
|
||||
question: "Interactive Session",
|
||||
img: "../../assets/knowledge1.jpg"
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
status: "1",
|
||||
title: "Webinar on Educational Psychology",
|
||||
challenge: "Join & enhance your skills.",
|
||||
question: "Discussion",
|
||||
img: "../../assets/knowledge2.jpg"
|
||||
},
|
||||
{
|
||||
id: "9",
|
||||
status: "1",
|
||||
title: "Seminar on Inclusive Education",
|
||||
challenge: "Participate & gain insights.",
|
||||
question: "Lecture",
|
||||
img: "../../assets/knowledge3.jpg"
|
||||
},
|
||||
{
|
||||
id: "10",
|
||||
status: "1",
|
||||
title: "Course on Early Childhood Education",
|
||||
challenge: "Complete the course & get certified.",
|
||||
question: "Multiple Modules",
|
||||
img: "../../assets/knowledge1.jpg"
|
||||
},
|
||||
{
|
||||
id: "11",
|
||||
status: "1",
|
||||
title: "Training on Classroom Management",
|
||||
challenge: "Improve your teaching strategies.",
|
||||
question: "Practical Tasks",
|
||||
img: "../../assets/knowledge2.jpg"
|
||||
},
|
||||
{
|
||||
id: "12",
|
||||
status: "1",
|
||||
title: "Lecture on Cognitive Development",
|
||||
challenge: "Expand your understanding & get certified.",
|
||||
question: "Q&A Session",
|
||||
img: "../../assets/knowledge3.jpg"
|
||||
},
|
||||
{
|
||||
id: "13",
|
||||
status: "1",
|
||||
title: "Workshop on Behavioral Issues",
|
||||
challenge: "Join & learn from experts.",
|
||||
question: "Interactive Session",
|
||||
img: "../../assets/knowledge1.jpg"
|
||||
},
|
||||
{
|
||||
id: "14",
|
||||
status: "1",
|
||||
title: "Seminar on Learning Disabilities",
|
||||
challenge: "Participate & enhance your knowledge.",
|
||||
question: "Lecture",
|
||||
img: "../../assets/knowledge2.jpg"
|
||||
},
|
||||
{
|
||||
id: "15",
|
||||
status: "1",
|
||||
title: "Webinar on Child Psychology",
|
||||
challenge: "Join & expand your skills.",
|
||||
question: "Discussion",
|
||||
img: "../../assets/knowledge3.jpg"
|
||||
},
|
||||
{
|
||||
id: "16",
|
||||
status: "1",
|
||||
title: "Course on Special Education Needs",
|
||||
challenge: "Complete the course & get certified.",
|
||||
question: "Multiple Modules",
|
||||
img: "../../assets/knowledge1.jpg"
|
||||
},
|
||||
{
|
||||
id: "17",
|
||||
status: "1",
|
||||
title: "Training on Autism Spectrum Disorder",
|
||||
challenge: "Improve your teaching strategies.",
|
||||
question: "Practical Tasks",
|
||||
img: "../../assets/knowledge2.jpg"
|
||||
},
|
||||
{
|
||||
id: "18",
|
||||
status: "1",
|
||||
title: "Lecture on Emotional Development",
|
||||
challenge: "Expand your understanding & get certified.",
|
||||
question: "Q&A Session",
|
||||
img: "../../assets/knowledge3.jpg"
|
||||
},
|
||||
{
|
||||
id: "19",
|
||||
status: "1",
|
||||
title: "Workshop on ADHD",
|
||||
challenge: "Join & learn from experts.",
|
||||
question: "Interactive Session",
|
||||
img: "../../assets/knowledge1.jpg"
|
||||
},
|
||||
{
|
||||
id: "20",
|
||||
status: "1",
|
||||
title: "Seminar on Speech and Language Disorders",
|
||||
challenge: "Participate & enhance your knowledge.",
|
||||
question: "Lecture",
|
||||
img: "../../assets/knowledge2.jpg"
|
||||
},
|
||||
{
|
||||
id: "21",
|
||||
status: "1",
|
||||
title: "Webinar on Child Nutrition",
|
||||
challenge: "Join & expand your skills.",
|
||||
question: "Discussion",
|
||||
img: "../../assets/knowledge3.jpg"
|
||||
}
|
||||
];
|
||||
const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));
|
||||
|
||||
const highestRank = sortedData[0];
|
||||
const secondHighestRank = sortedData[1];
|
||||
const thirdHighestRank = sortedData[2];
|
||||
|
||||
export default function Index(){
|
||||
return(
|
||||
<section className='container mx-auto my-16'>
|
||||
<div className='grid grid-cols-1 xl:grid-cols-7 gap-y-6 border-[1px] border-[#CFCFCF]'>
|
||||
<div className='xl:col-span-5 border-r-[1px] border-[#CFCFCF]'>
|
||||
<div className=''>
|
||||
<Tabs className='' defaultActiveKey="1" >
|
||||
<TabPane className='' tab="All" key="1">
|
||||
<div className='flex flex-col gap-6'>
|
||||
{knowledgeData.map(data => (
|
||||
<div key={data.id} className='flex flex-col lg: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>
|
||||
</TabPane>
|
||||
<TabPane tab="Completed" key="2">
|
||||
<div className='flex flex-col gap-6'>
|
||||
{knowledgeData.map(data => (
|
||||
<div key={data.id} className='flex flex-col lg: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} | 200 people have taken this quiz</p>
|
||||
<div className='flex flex-col md:flex-row gap-x-20'>
|
||||
<p className='text-[14px] font-[600]'>Score: 9/10</p>
|
||||
<p className='text-[14px] font-[600] inline-flex place-items-center'>Earned: 9 <img src="../../assets/points-icon.svg" alt="" /></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Review</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div className='xl:col-span-2'>
|
||||
<h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>Top Performers <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
||||
<p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p>
|
||||
<div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
|
||||
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='mx-auto h-[52px] w-[60px] ' src={`../../assets/${secondHighestRank.avatar}`} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth2.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{secondHighestRank.score}</p>
|
||||
</div>
|
||||
<div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='-mt-10' src="../../assets/crown.png" alt="" />
|
||||
<img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${highestRank.avatar}`} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{highestRank.score}</p>
|
||||
</div>
|
||||
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${thirdHighestRank.avatar}`} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth3.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
{sortedData.slice(3).map(data => (
|
||||
<div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2 hover:bg-[#FDF2E7] duration-700'>
|
||||
<p className='text-[11px] font-[700]'># {data.rank}</p>
|
||||
<img className='w-[35px] h-[35px]' src={`../../assets/${data.avatar}`} alt="" />
|
||||
<div>
|
||||
<p className='text-[14px] font-[700]'>{data.name}</p>
|
||||
<p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
|
||||
</div>
|
||||
<div className='flex flex-col justify-center place-items-center'>
|
||||
<img src="../../assets/points-icon.svg" alt="" />
|
||||
<p className='text-[10px] font-[700]'>{data.points} Points</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
506
app/components/ProgressReview.tsx
Normal file
506
app/components/ProgressReview.tsx
Normal file
@@ -0,0 +1,506 @@
|
||||
|
||||
|
||||
let quizModuleData = {
|
||||
modules: [
|
||||
{
|
||||
moduleId: 1,
|
||||
type: "Theory Quiz Scores",
|
||||
moduleName: "Module 1 - Life History of Dr. Maria Montessori",
|
||||
quizzes: [
|
||||
{
|
||||
quizId: 1,
|
||||
quizName: "Lorem Ipsum Dolor Sit",
|
||||
attendQuestion: 48,
|
||||
totalQuestion: 50,
|
||||
internalMarks: 28,
|
||||
attendance: 20,
|
||||
questions: [
|
||||
{
|
||||
questionId: 1,
|
||||
questionText: "What is the capital of France?",
|
||||
options: [
|
||||
"Paris",
|
||||
"London",
|
||||
"Berlin",
|
||||
"Madrid"
|
||||
],
|
||||
correctAnswer: "Paris"
|
||||
},
|
||||
{
|
||||
questionId: 2,
|
||||
questionText: "What is 2 + 2?",
|
||||
options: [
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6"
|
||||
],
|
||||
correctAnswer: "4"
|
||||
},
|
||||
{
|
||||
questionId: 3,
|
||||
questionText: "What is the boiling point of water?",
|
||||
options: [
|
||||
"90°C",
|
||||
"100°C",
|
||||
"110°C",
|
||||
"120°C"
|
||||
],
|
||||
correctAnswer: "100°C"
|
||||
},
|
||||
{
|
||||
questionId: 4,
|
||||
questionText: "Who wrote 'To Kill a Mockingbird'?",
|
||||
options: [
|
||||
"Harper Lee",
|
||||
"Mark Twain",
|
||||
"J.K. Rowling",
|
||||
"Ernest Hemingway"
|
||||
],
|
||||
correctAnswer: "Harper Lee"
|
||||
},
|
||||
{
|
||||
questionId: 5,
|
||||
questionText: "What is the largest planet in our solar system?",
|
||||
options: [
|
||||
"Earth",
|
||||
"Mars",
|
||||
"Jupiter",
|
||||
"Saturn"
|
||||
],
|
||||
correctAnswer: "Jupiter"
|
||||
},
|
||||
{
|
||||
questionId: 6,
|
||||
questionText: "What is the speed of light?",
|
||||
options: [
|
||||
"300,000 km/s",
|
||||
"150,000 km/s",
|
||||
"100,000 km/s",
|
||||
"50,000 km/s"
|
||||
],
|
||||
correctAnswer: "300,000 km/s"
|
||||
},
|
||||
{
|
||||
questionId: 7,
|
||||
questionText: "Who painted the Mona Lisa?",
|
||||
options: [
|
||||
"Vincent van Gogh",
|
||||
"Pablo Picasso",
|
||||
"Leonardo da Vinci",
|
||||
"Claude Monet"
|
||||
],
|
||||
correctAnswer: "Leonardo da Vinci"
|
||||
},
|
||||
{
|
||||
questionId: 8,
|
||||
questionText: "What is the chemical symbol for gold?",
|
||||
options: [
|
||||
"Au",
|
||||
"Ag",
|
||||
"Pt",
|
||||
"Pb"
|
||||
],
|
||||
correctAnswer: "Au"
|
||||
},
|
||||
{
|
||||
questionId: 9,
|
||||
questionText: "What is the tallest mountain in the world?",
|
||||
options: [
|
||||
"K2",
|
||||
"Kangchenjunga",
|
||||
"Mount Everest",
|
||||
"Lhotse"
|
||||
],
|
||||
correctAnswer: "Mount Everest"
|
||||
},
|
||||
{
|
||||
questionId: 10,
|
||||
questionText: "What is the smallest unit of life?",
|
||||
options: [
|
||||
"Cell",
|
||||
"Atom",
|
||||
"Molecule",
|
||||
"Organ"
|
||||
],
|
||||
correctAnswer: "Cell"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
quizId: 2,
|
||||
quizName: "Lorem Ipsum Dolor Sit",
|
||||
attendQuestion: 45,
|
||||
totalQuestion: 50,
|
||||
internalMarks: 29,
|
||||
attendance: 20,
|
||||
questions: [
|
||||
{
|
||||
questionId: 1,
|
||||
questionText: "What is the capital of Italy?",
|
||||
options: [
|
||||
"Rome",
|
||||
"Venice",
|
||||
"Florence",
|
||||
"Milan"
|
||||
],
|
||||
correctAnswer: "Rome"
|
||||
},
|
||||
{
|
||||
questionId: 2,
|
||||
questionText: "What is 3 + 5?",
|
||||
options: [
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"10"
|
||||
],
|
||||
correctAnswer: "8"
|
||||
},
|
||||
{
|
||||
questionId: 3,
|
||||
questionText: "What is the freezing point of water?",
|
||||
options: [
|
||||
"0°C",
|
||||
"32°C",
|
||||
"100°C",
|
||||
"273K"
|
||||
],
|
||||
correctAnswer: "0°C"
|
||||
},
|
||||
{
|
||||
questionId: 4,
|
||||
questionText: "Who wrote 'Pride and Prejudice'?",
|
||||
options: [
|
||||
"Jane Austen",
|
||||
"Charles Dickens",
|
||||
"Emily Brontë",
|
||||
"George Eliot"
|
||||
],
|
||||
correctAnswer: "Jane Austen"
|
||||
},
|
||||
{
|
||||
questionId: 5,
|
||||
questionText: "What is the smallest planet in our solar system?",
|
||||
options: [
|
||||
"Mercury",
|
||||
"Venus",
|
||||
"Earth",
|
||||
"Mars"
|
||||
],
|
||||
correctAnswer: "Mercury"
|
||||
},
|
||||
{
|
||||
questionId: 6,
|
||||
questionText: "What is the speed of sound?",
|
||||
options: [
|
||||
"343 m/s",
|
||||
"300 m/s",
|
||||
"1500 m/s",
|
||||
"1000 m/s"
|
||||
],
|
||||
correctAnswer: "343 m/s"
|
||||
},
|
||||
{
|
||||
questionId: 7,
|
||||
questionText: "Who painted the Starry Night?",
|
||||
options: [
|
||||
"Vincent van Gogh",
|
||||
"Pablo Picasso",
|
||||
"Leonardo da Vinci",
|
||||
"Claude Monet"
|
||||
],
|
||||
correctAnswer: "Vincent van Gogh"
|
||||
},
|
||||
{
|
||||
questionId: 8,
|
||||
questionText: "What is the chemical symbol for silver?",
|
||||
options: [
|
||||
"Au",
|
||||
"Ag",
|
||||
"Pt",
|
||||
"Pb"
|
||||
],
|
||||
correctAnswer: "Ag"
|
||||
},
|
||||
{
|
||||
questionId: 9,
|
||||
questionText: "What is the second tallest mountain in the world?",
|
||||
options: [
|
||||
"K2",
|
||||
"Kangchenjunga",
|
||||
"Mount Everest",
|
||||
"Lhotse"
|
||||
],
|
||||
correctAnswer: "K2"
|
||||
},
|
||||
{
|
||||
questionId: 10,
|
||||
questionText: "What is the largest organ in the human body?",
|
||||
options: [
|
||||
"Liver",
|
||||
"Heart",
|
||||
"Skin",
|
||||
"Brain"
|
||||
],
|
||||
correctAnswer: "Skin"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
moduleId: 2,
|
||||
type: "Theory Quiz Scores",
|
||||
moduleName: "Module 2",
|
||||
attendQuestion: 42,
|
||||
totalQuestion: 50,
|
||||
internalMarks: 22,
|
||||
attendance: 20,
|
||||
quizzes: [
|
||||
{
|
||||
quizId: 1,
|
||||
quizName: "Quiz 1",
|
||||
attendQuestion: 49,
|
||||
totalQuestion: 50,
|
||||
internalMarks: 2,
|
||||
attendance: 20,
|
||||
questions: [
|
||||
{
|
||||
questionId: 1,
|
||||
questionText: "What is the capital of Germany?",
|
||||
options: [
|
||||
"Berlin",
|
||||
"Munich",
|
||||
"Hamburg",
|
||||
"Frankfurt"
|
||||
],
|
||||
correctAnswer: "Berlin"
|
||||
},
|
||||
{
|
||||
questionId: 2,
|
||||
questionText: "What is 5 + 3?",
|
||||
options: [
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"10"
|
||||
],
|
||||
correctAnswer: "8"
|
||||
},
|
||||
{
|
||||
questionId: 3,
|
||||
questionText: "What is the melting point of ice?",
|
||||
options: [
|
||||
"0°C",
|
||||
"32°C",
|
||||
"100°C",
|
||||
"273K"
|
||||
],
|
||||
correctAnswer: "0°C"
|
||||
},
|
||||
{
|
||||
questionId: 4,
|
||||
questionText: "Who wrote '1984'?",
|
||||
options: [
|
||||
"George Orwell",
|
||||
"Aldous Huxley",
|
||||
"Ray Bradbury",
|
||||
"J.D. Salinger"
|
||||
],
|
||||
correctAnswer: "George Orwell"
|
||||
},
|
||||
{
|
||||
questionId: 5,
|
||||
questionText: "What is the second smallest planet in our solar system?",
|
||||
options: [
|
||||
"Mercury",
|
||||
"Venus",
|
||||
"Earth",
|
||||
"Mars"
|
||||
],
|
||||
correctAnswer: "Mars"
|
||||
},
|
||||
{
|
||||
questionId: 6,
|
||||
questionText: "What is the speed of light in a vacuum?",
|
||||
options: [
|
||||
"300,000 km/s",
|
||||
"150,000 km/s",
|
||||
"299,792 km/s",
|
||||
"299,792 m/s"
|
||||
],
|
||||
correctAnswer: "299,792 km/s"
|
||||
},
|
||||
{
|
||||
questionId: 7,
|
||||
questionText: "Who painted the Last Supper?",
|
||||
options: [
|
||||
"Vincent van Gogh",
|
||||
"Pablo Picasso",
|
||||
"Leonardo da Vinci",
|
||||
"Claude Monet"
|
||||
],
|
||||
correctAnswer: "Leonardo da Vinci"
|
||||
},
|
||||
{
|
||||
questionId: 8,
|
||||
questionText: "What is the chemical symbol for iron?",
|
||||
options: [
|
||||
"Fe",
|
||||
"Ir",
|
||||
"In",
|
||||
"I"
|
||||
],
|
||||
correctAnswer: "Fe"
|
||||
},
|
||||
{
|
||||
questionId: 9,
|
||||
questionText: "What is the third tallest mountain in the world?",
|
||||
options: [
|
||||
"K2",
|
||||
"Kangchenjunga",
|
||||
"Mount Everest",
|
||||
"Lhotse"
|
||||
],
|
||||
correctAnswer: "Kangchenjunga"
|
||||
},
|
||||
{
|
||||
questionId: 10,
|
||||
questionText: "What is the smallest bone in the human body?",
|
||||
options: [
|
||||
"Stapes",
|
||||
"Femur",
|
||||
"Tibia",
|
||||
"Fibula"
|
||||
],
|
||||
correctAnswer: "Stapes"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
console.log(quizModuleData)
|
||||
import React, { useState } from 'react';
|
||||
import { Modal } from 'antd';
|
||||
|
||||
|
||||
export default function Index() {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [selectedQuiz, setSelectedQuiz] = useState(null);
|
||||
|
||||
const showModal = (quiz) => {
|
||||
setSelectedQuiz(quiz);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
setIsModalOpen(false);
|
||||
setSelectedQuiz(null);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setIsModalOpen(false);
|
||||
setSelectedQuiz(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="">
|
||||
<div className="flex flex-col">
|
||||
{
|
||||
quizModuleData.modules.map((moduleData) => (
|
||||
<div key={moduleData.moduleId}>
|
||||
<div className="p-6">
|
||||
<p className="text-[16px] font-[700] text-[#EF7A0C]">{moduleData.type}</p>
|
||||
<p className="text-[22px] font-[700]">{moduleData.moduleName}</p>
|
||||
<p className="text-[14px] font-[600]">3/8 Quizzes Completed </p>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
{
|
||||
moduleData.quizzes.map((quizData) => (
|
||||
<div onClick={() => showModal(quizData)} className="flex flex-row justify-between place-items-center hover:bg-[#FFF4EA] duration-500 border-b-[1px] border-b-[#CFCFCF] p-6 cursor-pointer" key={quizData.quizId}>
|
||||
<div className="flex flex-col space-y-2">
|
||||
<h3 className="text-[20px] font-[700]">#{quizData.quizId} {quizData.quizName}</h3>
|
||||
<p className="text-[16px] font-[700] text-[#6E6E6E]">
|
||||
<span>Internal Marks: {quizData.internalMarks}</span> •
|
||||
<span>Attendance: {quizData.attendance}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-row space-x-4">
|
||||
<p className="bg-[#FFE2C7] p-2 rounded-[8px]">
|
||||
<span className="text-[32px] font-[700] text-[#EF7A0C]">{quizData.attendQuestion}</span>/
|
||||
<span className="text-[16px] font-[700] ">{quizData.totalQuestion}</span>
|
||||
</p>
|
||||
<img src="../../assets/right-arrow.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
{selectedQuiz && (
|
||||
<Modal title={selectedQuiz.quizName} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={1000}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 border-b-[1px] border-b-[#CFCFCF]">
|
||||
<div className="flex justify-center place-items-center border-r-[1px] border-[#CFCFCF] my-3">
|
||||
<div className="flex flex-row space-x-2">
|
||||
<div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
|
||||
<img className=" " src="../../assets/calendar.svg" alt="" />
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
<p className="text-[20px] font-[800]">18/10</p>
|
||||
<p className="text-[14px] font-[600] text-[#414141]">Attendance</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center place-items-center border-r-[1px] border-[#CFCFCF] my-3">
|
||||
<div className="flex flex-row space-x-2">
|
||||
<div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
|
||||
<img className=" " src="../../assets/note.svg" alt="" />
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
<p className="text-[20px] font-[800]">12 <span className="text-[14px] font-[500]">Questions</span></p>
|
||||
<p className="text-[14px] font-[600] text-[#414141]">Attempted</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center place-items-center my-3">
|
||||
<div className="flex flex-row space-x-2">
|
||||
<div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
|
||||
<img className=" " src="../../assets/note.svg" alt="" />
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
<p className="text-[20px] font-[800]">12 <span className="text-[14px] font-[500]">Correct</span></p>
|
||||
<p className="text-[14px] font-[600] text-[#414141]">Attempts</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{selectedQuiz.questions.map((questionData) => (
|
||||
<div key={questionData.questionId} className="mb-4 px-10 flex flex-col space-y-2">
|
||||
<p className='text-[20px] font-[700]'>Q{questionData.questionId}: {questionData.questionText}</p>
|
||||
<p className="text-[16px] font-[600] text-[#EF7A0C]">Your Answer</p>
|
||||
<p className="text-[20px] font-[500]">{questionData.correctAnswer}</p>
|
||||
<div className='inline-flex place-items-center space-x-4 w-full border-[1px] border-[#218B32] rounded-[10px] p-3'>
|
||||
<p className='text-[14px] font-[700] text-[#218B32] inline-flex place-items-center'><img src="../../assets/green-tick.svg" alt="" /> Correct</p>
|
||||
|
||||
<p className='text-[14px] font-[400]'> Correct Answer: {questionData.correctAnswer}</p>
|
||||
</div>
|
||||
<ul>
|
||||
{/* {questionData.options.map((option, index) => (
|
||||
<li key={index}>{option}</li>
|
||||
))} */}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</Modal>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
44
app/components/ProgressReviewTopSection.tsx
Normal file
44
app/components/ProgressReviewTopSection.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
export default function Index() {
|
||||
return(
|
||||
<section className="container mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 ">
|
||||
<div className="flex flex-col justify-center place-items-center border-r-[1px] border-[#CFCFCF] my-6">
|
||||
<div className="flex flex-row space-x-2">
|
||||
<div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
|
||||
<img className=" " src="../../assets/calendar.svg" alt="" />
|
||||
</div>
|
||||
<p className="text-[32px] font-[800]">70%</p>
|
||||
</div>
|
||||
<p className="text-[16px] font-[600] text-[#414141] py-2">Average Attendance</p>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center place-items-center border-r-[1px] border-[#CFCFCF] my-6">
|
||||
<div className="flex flex-row space-x-2">
|
||||
<div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
|
||||
<img className=" " src="../../assets/cart.svg" alt="" />
|
||||
</div>
|
||||
<p className="text-[32px] font-[800]">02</p>
|
||||
</div>
|
||||
<p className="text-[16px] font-[600] text-[#414141] py-2">Total Certificates</p>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center place-items-center border-r-[1px] border-[#CFCFCF] my-6">
|
||||
<div className="flex flex-row space-x-2">
|
||||
<div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
|
||||
<img className=" " src="../../assets/note.svg" alt="" />
|
||||
</div>
|
||||
<p className="text-[32px] font-[800]">12</p>
|
||||
</div>
|
||||
<p className="text-[16px] font-[600] text-[#414141] py-2">Tests Taken</p>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center place-items-center my-6">
|
||||
<div className="flex flex-row space-x-2">
|
||||
<div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
|
||||
<img className=" " src="../../assets/module.svg" alt="" />
|
||||
</div>
|
||||
<p className="text-[32px] font-[800]">0</p>
|
||||
</div>
|
||||
<p className="text-[16px] font-[600] text-[#414141] py-2">Modules Completed</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
152
app/components/QuizzesScore.tsx
Normal file
152
app/components/QuizzesScore.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import React from 'react';
|
||||
import { Flex, Progress } from 'antd';
|
||||
|
||||
let quizData = [
|
||||
{
|
||||
quizId: 1,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 1",
|
||||
percentage: "60"
|
||||
},
|
||||
{
|
||||
quizId: 2,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 2",
|
||||
percentage: "75"
|
||||
},
|
||||
{
|
||||
quizId: 3,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 3",
|
||||
percentage: "80"
|
||||
},
|
||||
{
|
||||
quizId: 4,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 4",
|
||||
percentage: "65"
|
||||
},
|
||||
{
|
||||
quizId: 5,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 5",
|
||||
percentage: "70"
|
||||
},
|
||||
{
|
||||
quizId: 6,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 6",
|
||||
percentage: "85"
|
||||
},
|
||||
{
|
||||
quizId: 7,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 7",
|
||||
percentage: "90"
|
||||
},
|
||||
{
|
||||
quizId: 8,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 8",
|
||||
percentage: "95"
|
||||
},
|
||||
{
|
||||
quizId: 9,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 9",
|
||||
percentage: "88"
|
||||
},
|
||||
{
|
||||
quizId: 10,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 10",
|
||||
percentage: "92"
|
||||
},
|
||||
{
|
||||
quizId: 11,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 11",
|
||||
percentage: "77"
|
||||
},
|
||||
{
|
||||
quizId: 12,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 12",
|
||||
percentage: "82"
|
||||
},
|
||||
{
|
||||
quizId: 13,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 13",
|
||||
percentage: "68"
|
||||
},
|
||||
{
|
||||
quizId: 14,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 14",
|
||||
percentage: "73"
|
||||
},
|
||||
{
|
||||
quizId: 15,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 15",
|
||||
percentage: "79"
|
||||
},
|
||||
{
|
||||
quizId: 16,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 16",
|
||||
percentage: "87"
|
||||
},
|
||||
{
|
||||
quizId: 17,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 17",
|
||||
percentage: "93"
|
||||
},
|
||||
{
|
||||
quizId: 18,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 18",
|
||||
percentage: "67"
|
||||
},
|
||||
{
|
||||
quizId: 19,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 19",
|
||||
percentage: "89"
|
||||
},
|
||||
{
|
||||
quizId: 20,
|
||||
quizType: "AI Quiz",
|
||||
quizName: "Assessment on Special Education - 20",
|
||||
percentage: "91"
|
||||
}
|
||||
]
|
||||
|
||||
export default function Index(){
|
||||
return(
|
||||
<section>
|
||||
<div className="border-[1px] border-[#CFCFCF] rounded-t-[10px]" style={{background: 'linear-gradient(138.22deg, #4377C6 0%, #092E76 180.99%)'}}>
|
||||
<h2 className="text-[20px] font-[700] text-[#FFF] p-4">Quizzes score</h2>
|
||||
<div className="flex flex-col">
|
||||
{quizData.slice(15).map((data => (
|
||||
<a href='#' className='flex flex-row justify-between place-items-center bg-[#FCFCFC] border-b-[1px] border-b-[#CFCFCF] p-4'>
|
||||
<div className='flex flex-col'>
|
||||
<p className='text-[14px] font-[600] text-[#EF7A0C]'>{data.quizType}</p>
|
||||
<p className='text-[16px] font-[700]'>{data.quizName}</p>
|
||||
</div>
|
||||
<div className='flex flex-row'>
|
||||
<Progress type="dashboard" percent={Number(data.percentage)} gapDegree={0} width={40} strokeColor="#EF7A0C" format={(percent) => (<span style={{ fontWeight: 700 }}>{percent}%</span>)}/>
|
||||
<img src="../../assets/right-arrow.svg" alt="" />
|
||||
</div>
|
||||
</a>
|
||||
)))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
{/* <Progress type="dashboard" percent={75} gapDegree={30} /> */}
|
||||
@@ -1,459 +0,0 @@
|
||||
import React, {useState} from 'react';
|
||||
import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons';
|
||||
import Icon from '@ant-design/icons';
|
||||
|
||||
import AdministrationIcon from '~/components/customIcon/AdministrationIcon';
|
||||
import MyCoursesIcon from '~/components/customIcon/MyCoursesIcon';
|
||||
import ExaminationIcon from '~/components/customIcon/ExaminationIcon';
|
||||
import CommunityIcon from '~/components/customIcon/CommunityIcon';
|
||||
import NotificationIcon from '~/components/customIcon/NotificationIcon';
|
||||
import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import '../../public/assets/student-dashboard.css';
|
||||
|
||||
let courseData = [
|
||||
{
|
||||
id : "1",
|
||||
title : "Life History of Dr. Maria Montessori",
|
||||
chapter : "1",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course1.jpg"
|
||||
},
|
||||
{
|
||||
id : "2",
|
||||
title : "Introduction to Montessori Methods",
|
||||
chapter : "2",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course2.jpg"
|
||||
},
|
||||
{
|
||||
id : "3",
|
||||
title : "Exercises on Practical Life",
|
||||
chapter : "3",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course3.jpg"
|
||||
}
|
||||
];
|
||||
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"
|
||||
}
|
||||
];
|
||||
|
||||
let performersData = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Eiden",
|
||||
score: "48/50",
|
||||
points: "999",
|
||||
rank: "1",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jackson",
|
||||
score: "45/50",
|
||||
points: "997",
|
||||
rank: "2",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emma Aria",
|
||||
score: "43/50",
|
||||
points: "994",
|
||||
rank: "3",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "John Doe",
|
||||
score: "40/50",
|
||||
points: "990",
|
||||
rank: "4",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jane Cooper",
|
||||
score: "37/50",
|
||||
points: "987",
|
||||
rank: "5",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "John Doe",
|
||||
score: "35/50",
|
||||
points: "982",
|
||||
rank: "6",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar6.png"
|
||||
}
|
||||
];
|
||||
|
||||
const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));
|
||||
|
||||
const highestRank = sortedData[0];
|
||||
const secondHighestRank = sortedData[1];
|
||||
const thirdHighestRank = sortedData[2];
|
||||
|
||||
console.log('The highest rank is:', highestRank);
|
||||
console.log('The second highest rank is:', secondHighestRank);
|
||||
console.log('The Third highest rank is:', thirdHighestRank);
|
||||
|
||||
|
||||
|
||||
// const highestRank = performersData.reduce((prev, current) => (prev.rank < current.rank) ? prev : current);
|
||||
|
||||
// console.log('The highest rank is:', highestRank);
|
||||
|
||||
const { Header, Content, Sider } = Layout;
|
||||
|
||||
const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
|
||||
key,
|
||||
label: `navsd ${key}`,
|
||||
}));
|
||||
|
||||
type MenuItem = Required<MenuProps>['items'][number];
|
||||
|
||||
|
||||
const items2: MenuProps['items'] = [
|
||||
{
|
||||
key: 'subsd1',
|
||||
icon: <AdministrationIcon />,
|
||||
label: (<p> Administration</p>),
|
||||
children: [
|
||||
{
|
||||
key: '1sd',
|
||||
label: (<a href='#'>Class Schedules</a>),
|
||||
},
|
||||
{
|
||||
key: '2sd',
|
||||
label: (<a href='#'>Classmate Directory</a>),
|
||||
},
|
||||
{
|
||||
key: '3sd',
|
||||
label: (<a href='#'>Qualifications</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subsd2',
|
||||
icon: <MyCoursesIcon />,
|
||||
label: (<p> My Courses</p>),
|
||||
children: [
|
||||
{
|
||||
key: '4sd',
|
||||
label: (<a href='#'>Graduate Program</a>),
|
||||
},
|
||||
{
|
||||
key: '5sd',
|
||||
label: (<a href='#'>Post-Graduate Program</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subsd3',
|
||||
icon: <ExaminationIcon />,
|
||||
label: (<p> Examinations</p>),
|
||||
children: [
|
||||
{
|
||||
key: '6sd',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '7sd',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '8sd',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subsd4',
|
||||
icon: <CommunityIcon />,
|
||||
label: (<p> Community</p>),
|
||||
children: [
|
||||
{
|
||||
key: '9sd',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '10sd',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '11sd',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subsd5',
|
||||
icon: <NotificationIcon />,
|
||||
label: (<p> Notifications</p>),
|
||||
children: [
|
||||
{
|
||||
key: '12sd',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '13sd',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '14sd',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
// getItem('Files', '9', <FileOutlined />),
|
||||
{
|
||||
key: 'grp',
|
||||
label: '',
|
||||
type: 'group',
|
||||
style: { marginTop: '100px' },
|
||||
children: [
|
||||
{
|
||||
key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
|
||||
icon: React.createElement(SettingOutlined, { style: { color: '#000' } }),
|
||||
label: (<h2 className='text-[18px] font-[700] text-[#000]'>Settings</h2>)
|
||||
},
|
||||
{
|
||||
key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
|
||||
icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }),
|
||||
label: (<h2 className='text-[18px] font-[700] text-[#000]'>Help & Support</h2>)
|
||||
},
|
||||
{
|
||||
key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
|
||||
icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }),
|
||||
label: (<h2 className='text-[18px] font-[700] text-[#000]'>Logout</h2>)
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: <a href="https://www.antgroup.com">1st menu item</a>,
|
||||
key: '01sd',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: <a href="https://www.aliyun.com">2nd menu item</a>,
|
||||
key: '02sd',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '03sd',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [open, setOpen] = React.useState<boolean>(false);
|
||||
const [loading, setLoading] = React.useState<boolean>(true);
|
||||
|
||||
const showLoading = () => {
|
||||
setOpen(true);
|
||||
setLoading(true);
|
||||
|
||||
// Simple loading mock. You should add cleanup logic in real world.
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 100);
|
||||
};
|
||||
const { token: { colorBgContainer}, } = theme.useToken();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<>
|
||||
{/* <Button type="primary" onClick={showLoading}>Open Modal</Button> */}
|
||||
<Modal style={{top: '20px', right: '0px'}} title={<p>Loading Modal</p>} footer={ <Button type="primary" onClick={showLoading}> Reload </Button>} loading={loading} open={open} onCancel={() => setOpen(false)} >
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
</Modal>
|
||||
</>
|
||||
{/* <Header style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<div className="demo-logo" />
|
||||
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} style={{ flex: 1, minWidth: 0 }} />
|
||||
</Header> */}
|
||||
<Layout>
|
||||
<div >
|
||||
<Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
|
||||
<div className='flex flex-col justify-center demo-logo-vertical'>
|
||||
<div className='px-4'>
|
||||
<h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>
|
||||
</div>
|
||||
</div>
|
||||
<Menu className='custom-menu' mode="inline" style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
|
||||
</Sider>
|
||||
</div>
|
||||
{/* defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} */}
|
||||
<Layout style={{marginLeft: 366, background: '#FFF'}}>
|
||||
<Content style={{ overflow: 'initial',}}>
|
||||
<div className='border-b-[1px] py-2 border-[#CFCFCF]'>
|
||||
<div className='container mx-auto flex flex-row justify-between pr-8'>
|
||||
<div className='inline-flex justify-center place-items-center'>
|
||||
<img src="../../assets/student-dash.svg" alt=""/>
|
||||
<p className='pl-1 text-[18px] font-[700] whitespace-nowrap'>Student Dashboard</p>
|
||||
</div>
|
||||
<div>
|
||||
<Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
|
||||
<div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
|
||||
<svg viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.06445 20.2658V18.2111H7.1191V11.0198C7.1191 9.59872 7.54715 8.33597 8.40325 7.2316C9.25935 6.12723 10.3723 5.40382 11.742 5.06138V4.34225C11.742 3.9142 11.8919 3.55036 12.1915 3.25072C12.4911 2.95109 12.855 2.80127 13.283 2.80127C13.7111 2.80127 14.0749 2.95109 14.3746 3.25072C14.6742 3.55036 14.824 3.9142 14.824 4.34225V5.06138C16.1938 5.40382 17.3067 6.12723 18.1628 7.2316C19.0189 8.33597 19.447 9.59872 19.447 11.0198V18.2111H21.5016V20.2658H5.06445ZM13.283 23.3477C12.718 23.3477 12.2343 23.1465 11.8319 22.7442C11.4296 22.3418 11.2284 21.8581 11.2284 21.2931H15.3377C15.3377 21.8581 15.1365 22.3418 14.7341 22.7442C14.3318 23.1465 13.8481 23.3477 13.283 23.3477ZM9.17374 18.2111H17.3923V11.0198C17.3923 9.88979 16.99 8.9224 16.1852 8.11766C15.3805 7.31293 14.4131 6.91056 13.283 6.91056C12.153 6.91056 11.1856 7.31293 10.3808 8.11766C9.57611 8.9224 9.17374 9.88979 9.17374 11.0198V18.2111Z" fill="black"/>
|
||||
<circle cx="19.4462" cy="19.2384" r="4.23771" fill="#FF0000" stroke="#fff" strokeWidth="2.31148"/>
|
||||
</svg>
|
||||
</div>
|
||||
</Button>
|
||||
<Dropdown menu={{ items }} trigger={['click']}>
|
||||
<a onClick={(e) => e.preventDefault()}>
|
||||
<Space>
|
||||
<div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
|
||||
<img src="/assets/man.png" alt="" />
|
||||
<div>
|
||||
<p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
|
||||
<p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
|
||||
</div>
|
||||
<RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
|
||||
</div>
|
||||
</Space>
|
||||
</a>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section className='border-b-[1px] border-[#CFCFCF]'>
|
||||
<div className='container mx-auto'>
|
||||
<h2 className='text-[20px] font-[700] my-4 py-2 inline-flex leading-[24px]'>Graduate Program</h2>
|
||||
</div>
|
||||
</section>
|
||||
<section className='bg-[#FCFCFC]'>
|
||||
<div className='container mx-auto'>
|
||||
<h2 className='text-[20px] font-[700] my-4 inline-flex leading-[24px]'>Continue Learning <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
|
||||
{courseData.map(data=>(
|
||||
<div key={data.id} className=''>
|
||||
<img className='w-full rounded-[10px]' src={data.img} alt="" />
|
||||
<h2 className='text-[16px] font-[700] my-2'>{data.title}</h2>
|
||||
<p className='text-[14px] font-[500] text-[#6E6E6E]'>
|
||||
<span>Chapter {data.chapter}</span> •
|
||||
<span>{data.Program}</span>
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* knowledgeData */}
|
||||
<section className='container mx-auto my-16'>
|
||||
<div className='grid grid-cols-1 xl:grid-cols-7 gap-y-6 border-[1px] border-[#CFCFCF]'>
|
||||
<div className='xl:col-span-5 border-r-[1px] border-[#CFCFCF]'>
|
||||
<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 className='xl:col-span-2'>
|
||||
<h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>Top Performers <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
||||
<p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p>
|
||||
<div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
|
||||
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='mx-auto h-[52px] w-[60px] ' src={`../../assets/${secondHighestRank.avatar}`} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth2.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{secondHighestRank.score}</p>
|
||||
</div>
|
||||
<div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='-mt-10' src="../../assets/crown.png" alt="" />
|
||||
<img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${highestRank.avatar}`} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{highestRank.score}</p>
|
||||
</div>
|
||||
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${thirdHighestRank.avatar}`} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth3.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
{sortedData.slice(3).map(data => (
|
||||
<div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2'>
|
||||
<p className='text-[11px] font-[700]'># {data.rank}</p>
|
||||
<img className='w-[35px] h-[35px]' src={`../../assets/${data.avatar}`} alt="" />
|
||||
<div>
|
||||
<p className='text-[14px] font-[700]'>{data.name}</p>
|
||||
<p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
|
||||
</div>
|
||||
<div className='flex flex-col justify-center place-items-center'>
|
||||
<img src="../../assets/points-icon.svg" alt="" />
|
||||
<p className='text-[10px] font-[700]'>{data.points} Points</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
export default App;
|
||||
11
app/components/YourCertificates.tsx
Normal file
11
app/components/YourCertificates.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
export default function(){
|
||||
return(
|
||||
<div className="">
|
||||
<h2 className="text-[20px] font-[700] my-6">Your Certificates</h2>
|
||||
|
||||
<div className="border-[1px] border-[#E9E9E9] rounded-[12px] bg-[#FCFCFC] p-4">
|
||||
<div className="h-[260px] bg-[#FFF1E3] rounded-[10px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user