generated from dwd/boilarplate-remix-tailwind-antd
master
Suvodip
parent
990ec3b04e
commit
69ad64df28
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import type { MetaFunction } from "@remix-run/node";
|
||||
import TestComponent from '../components/TestComponent'; // Fix typo here
|
||||
import TestComponent from '../components/StudentDashboard-no-content'; // Fix typo here
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ 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, Breadcrumb, Dropdown, Space} from 'antd';
|
||||
import '../../public/assets/student-dashboard.css';
|
||||
import '../../public/assets/left_side_nav.css';
|
||||
|
||||
let classmatesData = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,10 +1,235 @@
|
|||
import type { MetaFunction } from "@remix-run/node";
|
||||
import KnowledgeQuest from '../components/KnowledgeQuest'
|
||||
import React, {useState} from 'react';
|
||||
import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} 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 KnowledgeQuestsPageContent from '~/components/KnowledgeQuestsPageContent';
|
||||
import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import '../../public/assets/left_side_nav.css';
|
||||
|
||||
|
||||
const { 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();
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<Layout>
|
||||
<Layout>
|
||||
<div >
|
||||
<KnowledgeQuest /> {/* Ensure the component name matches the import */}
|
||||
<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>
|
||||
<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 className='flex flex-row place-items-center'>
|
||||
<button className='bg-[#000] py-2.5 px-3 rounded-[8px] text-[#FFF] tetx-[16px] font-[600] inline-flex justify-center place-items-center'>
|
||||
<img src="../../assets/ai-button-icon.svg" alt="" /> AI Generative Quiz
|
||||
</button>
|
||||
<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]'>
|
||||
<img src="../../assets/notification-bell.svg" alt="" />
|
||||
</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>
|
||||
{/* Place Content from here */}
|
||||
<div>
|
||||
<KnowledgeQuestsPageContent />
|
||||
</div>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
};
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,251 @@
|
|||
import React, {useState} from 'react';
|
||||
import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} 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 ProgressReviewTopSection from '~/components/ProgressReviewTopSection';
|
||||
import ProgressReview from '~/components/ProgressReview';
|
||||
import QuizzesScore from '~/components/QuizzesScore'
|
||||
import YourCertificates from '~/components/YourCertificates'
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import '../../public/assets/left_side_nav.css';
|
||||
|
||||
|
||||
const { 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>
|
||||
<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>
|
||||
<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]'>
|
||||
<img src="../../assets/notification-bell.svg" alt="" />
|
||||
</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>
|
||||
|
||||
{/* Place Content from here */}
|
||||
<div>
|
||||
<ProgressReviewTopSection />
|
||||
</div>
|
||||
<div className='grid grid-cols-1 xl:grid-cols-7 border-t-[1px] border-t-[#CFCFCF]'>
|
||||
<div className='xl:col-span-5 border-r-[1px] border-r-[#CFCFCF]'>
|
||||
<ProgressReview />
|
||||
</div>
|
||||
<div className="xl:col-span-2 p-4">
|
||||
<QuizzesScore />
|
||||
|
||||
<YourCertificates />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
import React, {useState} from 'react';
|
||||
import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} 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/left_side_nav.css';
|
||||
|
||||
|
||||
const { 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>
|
||||
<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>
|
||||
<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]'>
|
||||
<img src="../../assets/notification-bell.svg" alt="" />
|
||||
</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>
|
||||
|
||||
{/* Place Content from here */}
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
export default App;
|
||||
|
|
@ -1,81 +1,236 @@
|
|||
import React, {useState} from 'react';
|
||||
import {
|
||||
DesktopOutlined,
|
||||
FileOutlined,
|
||||
PieChartOutlined,
|
||||
TeamOutlined,
|
||||
UserOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Breadcrumb, Layout, Menu, theme } from 'antd';
|
||||
import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} 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 ContunueLearning from '~/components/ContinueLearning';
|
||||
import KnowledgeQuests from '~/components/KnowledgeQuests'
|
||||
import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import '../../public/assets/left_side_nav.css';
|
||||
|
||||
const { Header, Content, Footer, Sider } = Layout;
|
||||
|
||||
const { Content, Sider } = Layout;
|
||||
|
||||
const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
|
||||
key,
|
||||
label: `navsd ${key}`,
|
||||
}));
|
||||
|
||||
type MenuItem = Required<MenuProps>['items'][number];
|
||||
|
||||
function getItem(
|
||||
label: React.ReactNode,
|
||||
key: React.Key,
|
||||
icon?: React.ReactNode,
|
||||
children?: MenuItem[],
|
||||
): MenuItem {
|
||||
return {
|
||||
key,
|
||||
icon,
|
||||
children,
|
||||
label,
|
||||
} as MenuItem;
|
||||
}
|
||||
|
||||
const items: MenuItem[] = [
|
||||
getItem('Option 1', '1', <PieChartOutlined />),
|
||||
getItem('Option 2', '2', <DesktopOutlined />),
|
||||
getItem('User', 'sub1', <UserOutlined />, [
|
||||
getItem('Tom', '3'),
|
||||
getItem('Bill', '4'),
|
||||
getItem('Alex', '5'),
|
||||
]),
|
||||
getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
|
||||
getItem('Files', '9', <FileOutlined />),
|
||||
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 {
|
||||
token: { colorBgContainer, borderRadiusLG },
|
||||
} = theme.useToken();
|
||||
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 style={{ minHeight: '100vh' }}>
|
||||
<Sider theme="light" collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
|
||||
<div className="demo-logo-vertical" > IIMTT Logo </div>
|
||||
|
||||
<Menu theme="light" defaultSelectedKeys={['1']} mode="inline" items={items} > <span>Hi</span> </Menu>
|
||||
</Sider>
|
||||
<Layout>
|
||||
<Header style={{ padding: 0, background: colorBgContainer }} />
|
||||
<Content style={{ margin: '0 16px' }}>
|
||||
<Breadcrumb style={{ margin: '16px 0' }}>
|
||||
<Breadcrumb.Item>User</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>Bill</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<div
|
||||
style={{
|
||||
padding: 24,
|
||||
minHeight: 360,
|
||||
background: colorBgContainer,
|
||||
borderRadius: borderRadiusLG,
|
||||
}}
|
||||
>
|
||||
Bill is a cat.
|
||||
<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>
|
||||
<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]'>
|
||||
<img src="../../assets/notification-bell.svg" alt="" />
|
||||
</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>
|
||||
{/* Place content from here */}
|
||||
<div>
|
||||
<ContunueLearning />
|
||||
</div>
|
||||
<div>
|
||||
<KnowledgeQuests />
|
||||
</div>
|
||||
</Content>
|
||||
<Footer style={{ textAlign: 'center' }}>
|
||||
Ant Design ©{new Date().getFullYear()} Created by Ant UED
|
||||
</Footer>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import type { MetaFunction } from "@remix-run/node";
|
||||
import StudentDashboard from '../components/StudentDashboard'
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<div>
|
||||
<StudentDashboard /> {/* Ensure the component name matches the import */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="22" height="25" viewBox="0 0 22 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.7278 14.7331C10.3856 14.7331 10.0985 14.6174 9.86656 14.3859C9.63457 14.1544 9.51857 13.8675 9.51857 13.5253C9.51857 13.1831 9.63431 12.896 9.8658 12.664C10.0973 12.4321 10.3842 12.3161 10.7264 12.3161C11.0686 12.3161 11.3557 12.4318 11.5876 12.6633C11.8196 12.8948 11.9356 13.1816 11.9356 13.5239C11.9356 13.8661 11.8199 14.1531 11.5884 14.3851C11.3569 14.6171 11.07 14.7331 10.7278 14.7331ZM6.06115 14.7331C5.71895 14.7331 5.43186 14.6174 5.19989 14.3859C4.9679 14.1544 4.85191 13.8675 4.85191 13.5253C4.85191 13.1831 4.96765 12.896 5.19913 12.664C5.43064 12.4321 5.71749 12.3161 6.0597 12.3161C6.4019 12.3161 6.68899 12.4318 6.92096 12.6633C7.15295 12.8948 7.26895 13.1816 7.26895 13.5239C7.26895 13.8661 7.1532 14.1531 6.92172 14.3851C6.69021 14.6171 6.40336 14.7331 6.06115 14.7331ZM15.3945 14.7331C15.0588 14.7331 14.7733 14.6174 14.5381 14.3859C14.3029 14.1544 14.1852 13.8675 14.1852 13.5253C14.1852 13.1831 14.3026 12.896 14.5374 12.664C14.7721 12.4321 15.0585 12.3161 15.3965 12.3161C15.7345 12.3161 16.02 12.4318 16.2529 12.6633C16.4858 12.8948 16.6023 13.1816 16.6023 13.5239C16.6023 13.8661 16.4865 14.1531 16.2551 14.3851C16.0235 14.6171 15.7367 14.7331 15.3945 14.7331ZM10.7278 19.3998C10.3856 19.3998 10.0985 19.2824 9.86656 19.0476C9.63457 18.8129 9.51857 18.5265 9.51857 18.1885C9.51857 17.8505 9.63431 17.565 9.8658 17.3321C10.0973 17.0992 10.3842 16.9827 10.7264 16.9827C11.0686 16.9827 11.3557 17.0985 11.5876 17.33C11.8196 17.5615 11.9356 17.8483 11.9356 18.1905C11.9356 18.5262 11.8199 18.8117 11.5884 19.0469C11.3569 19.2821 11.07 19.3998 10.7278 19.3998ZM6.06115 19.3998C5.71895 19.3998 5.43186 19.2824 5.19989 19.0476C4.9679 18.8129 4.85191 18.5265 4.85191 18.1885C4.85191 17.8505 4.96765 17.565 5.19913 17.3321C5.43064 17.0992 5.71749 16.9827 6.0597 16.9827C6.4019 16.9827 6.68899 17.0985 6.92096 17.33C7.15295 17.5615 7.26895 17.8483 7.26895 18.1905C7.26895 18.5262 7.1532 18.8117 6.92172 19.0469C6.69021 19.2821 6.40336 19.3998 6.06115 19.3998ZM15.3945 19.3998C15.0588 19.3998 14.7733 19.2824 14.5381 19.0476C14.3029 18.8129 14.1852 18.5265 14.1852 18.1885C14.1852 17.8505 14.3026 17.565 14.5374 17.3321C14.7721 17.0992 15.0585 16.9827 15.3965 16.9827C15.7345 16.9827 16.02 17.0985 16.2529 17.33C16.4858 17.5615 16.6023 17.8483 16.6023 18.1905C16.6023 18.5262 16.4865 18.8117 16.2551 19.0469C16.0235 19.2821 15.7367 19.3998 15.3945 19.3998ZM2.03986 24.1989C1.50321 24.1989 1.03786 24.0019 0.643797 23.6079C0.249755 23.2138 0.0527344 22.7485 0.0527344 22.2118V4.25401C0.0527344 3.71546 0.249755 3.24847 0.643797 2.85305C1.03786 2.45761 1.50321 2.25989 2.03986 2.25989H3.87293V1.50602C3.87293 1.23226 3.9698 0.997797 4.16354 0.802634C4.35727 0.60747 4.59288 0.509888 4.87037 0.509888C5.15614 0.509888 5.39708 0.60747 5.59318 0.802634C5.78927 0.997797 5.88732 1.23226 5.88732 1.50602V2.25989H15.5669V1.50602C15.5669 1.23226 15.6637 0.997797 15.8575 0.802634C16.0512 0.60747 16.2868 0.509888 16.5643 0.509888C16.8501 0.509888 17.091 0.60747 17.2871 0.802634C17.4832 0.997797 17.5813 1.23226 17.5813 1.50602V2.25989H19.4143C19.9529 2.25989 20.4199 2.45761 20.8153 2.85305C21.2107 3.24847 21.4085 3.71546 21.4085 4.25401V22.2118C21.4085 22.7485 21.2107 23.2138 20.8153 23.6079C20.4199 24.0019 19.9529 24.1989 19.4143 24.1989H2.03986ZM2.03986 22.2118H19.4143V9.73291H2.03986V22.2118Z" fill="#EF7A0C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.65267 17.7309V20.4277H21.8005V17.7309H2.65267ZM2.65267 22.358C2.12394 22.358 1.67073 22.1688 1.29306 21.7903C0.915397 21.4118 0.726562 20.9576 0.726562 20.4277V6.91545C0.726562 6.38556 0.915397 5.93137 1.29306 5.55287C1.67073 5.17438 2.12394 4.98513 2.65267 4.98513H5.96671C5.89118 4.81481 5.82036 4.6019 5.75427 4.34642C5.68818 4.09094 5.65513 3.85911 5.65513 3.65094C5.65513 2.74255 5.97615 1.96663 6.61819 1.32319C7.26022 0.679753 8.025 0.358032 8.91252 0.358032C9.49791 0.358032 10.0408 0.504699 10.5412 0.798032C11.0416 1.09137 11.4429 1.47459 11.745 1.94771L12.2549 2.71416L12.7364 1.94771C13.0574 1.45567 13.454 1.06771 13.9261 0.783839C14.3982 0.499968 14.9174 0.358032 15.484 0.358032C16.4092 0.358032 17.1929 0.675021 17.8349 1.309C18.477 1.94298 18.798 2.72362 18.798 3.65094C18.798 3.85911 18.7744 4.06728 18.7272 4.27545C18.68 4.48362 18.6092 4.72018 18.5147 4.98513H21.8005C22.3292 4.98513 22.7824 5.17438 23.1601 5.55287C23.5377 5.93137 23.7266 6.38556 23.7266 6.91545V20.4277C23.7266 20.9576 23.5377 21.4118 23.1601 21.7903C22.7824 22.1688 22.3292 22.358 21.8005 22.358H2.65267ZM2.65267 14.5516H21.8005V6.91545H14.9458L17.1835 10.038C17.3156 10.2462 17.3581 10.4638 17.3109 10.6909C17.2637 10.918 17.1551 11.1167 16.9852 11.2871C16.7775 11.4385 16.5509 11.5 16.3054 11.4716C16.0599 11.4432 15.8616 11.3249 15.7106 11.1167L12.2266 6.20577L8.68592 11.1167C8.53486 11.3249 8.33658 11.4479 8.09109 11.4858C7.84561 11.5236 7.64733 11.4574 7.49627 11.2871C7.28855 11.1357 7.17053 10.9464 7.1422 10.7193C7.11388 10.4922 7.16581 10.2651 7.29799 10.038L9.50735 6.91545H2.65267V14.5516ZM8.94085 5.15545C9.35628 5.15545 9.71035 5.00879 10.003 4.71545C10.2957 4.42212 10.4421 4.06728 10.4421 3.65094C10.4421 3.23459 10.2957 2.87975 10.003 2.58642C9.71035 2.29309 9.35628 2.14642 8.94085 2.14642C8.52541 2.14642 8.17135 2.29309 7.87866 2.58642C7.58596 2.87975 7.43962 3.23459 7.43962 3.65094C7.43962 4.06728 7.58596 4.42212 7.87866 4.71545C8.17135 5.00879 8.52541 5.15545 8.94085 5.15545ZM15.484 5.15545C15.9183 5.15545 16.2818 5.00879 16.5745 4.71545C16.8672 4.42212 17.0135 4.06728 17.0135 3.65094C17.0135 3.23459 16.8672 2.87975 16.5745 2.58642C16.2818 2.29309 15.9183 2.14642 15.484 2.14642C15.0874 2.14642 14.7428 2.29309 14.4501 2.58642C14.1574 2.87975 14.011 3.23459 14.011 3.65094C14.011 4.06728 14.1574 4.42212 14.4501 4.71545C14.7428 5.00879 15.0874 5.15545 15.484 5.15545Z" fill="#EF7A0C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.55925 12.1912L13.4342 6.3162L12.2676 5.14954L7.55925 9.85787L5.18425 7.48287L4.01758 8.64954L7.55925 12.1912ZM8.72591 16.6912C7.57313 16.6912 6.4898 16.4725 5.47591 16.035C4.46202 15.5975 3.58008 15.0037 2.83008 14.2537C2.08008 13.5037 1.48633 12.6218 1.04883 11.6079C0.611328 10.594 0.392578 9.51065 0.392578 8.35787C0.392578 7.20509 0.611328 6.12176 1.04883 5.10787C1.48633 4.09398 2.08008 3.21204 2.83008 2.46204C3.58008 1.71204 4.46202 1.11829 5.47591 0.680786C6.4898 0.243286 7.57313 0.0245361 8.72591 0.0245361C9.87869 0.0245361 10.962 0.243286 11.9759 0.680786C12.9898 1.11829 13.8717 1.71204 14.6217 2.46204C15.3717 3.21204 15.9655 4.09398 16.403 5.10787C16.8405 6.12176 17.0592 7.20509 17.0592 8.35787C17.0592 9.51065 16.8405 10.594 16.403 11.6079C15.9655 12.6218 15.3717 13.5037 14.6217 14.2537C13.8717 15.0037 12.9898 15.5975 11.9759 16.035C10.962 16.4725 9.87869 16.6912 8.72591 16.6912Z" fill="#218B32"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.22656 3.35791C4.8099 3.35791 4.45573 3.50374 4.16406 3.79541C3.8724 4.08708 3.72656 4.44124 3.72656 4.85791C3.72656 5.27458 3.8724 5.62874 4.16406 5.92041C4.45573 6.21208 4.8099 6.35791 5.22656 6.35791C5.64323 6.35791 5.9974 6.21208 6.28906 5.92041C6.58073 5.62874 6.72656 5.27458 6.72656 4.85791C6.72656 4.44124 6.58073 4.08708 6.28906 3.79541C5.9974 3.50374 5.64323 3.35791 5.22656 3.35791ZM5.22656 13.3579C4.8099 13.3579 4.45573 13.5037 4.16406 13.7954C3.8724 14.0871 3.72656 14.4412 3.72656 14.8579C3.72656 15.2746 3.8724 15.6287 4.16406 15.9204C4.45573 16.2121 4.8099 16.3579 5.22656 16.3579C5.64323 16.3579 5.9974 16.2121 6.28906 15.9204C6.58073 15.6287 6.72656 15.2746 6.72656 14.8579C6.72656 14.4412 6.58073 14.0871 6.28906 13.7954C5.9974 13.5037 5.64323 13.3579 5.22656 13.3579ZM1.72656 0.35791H17.7266C18.0099 0.35791 18.2474 0.453743 18.4391 0.64541C18.6307 0.837077 18.7266 1.07458 18.7266 1.35791V8.35791C18.7266 8.64124 18.6307 8.87874 18.4391 9.07041C18.2474 9.26208 18.0099 9.35791 17.7266 9.35791H1.72656C1.44323 9.35791 1.20573 9.26208 1.01406 9.07041C0.822396 8.87874 0.726562 8.64124 0.726562 8.35791V1.35791C0.726562 1.07458 0.822396 0.837077 1.01406 0.64541C1.20573 0.453743 1.44323 0.35791 1.72656 0.35791ZM2.72656 2.35791V7.35791H16.7266V2.35791H2.72656ZM1.72656 10.3579H17.7266C18.0099 10.3579 18.2474 10.4537 18.4391 10.6454C18.6307 10.8371 18.7266 11.0746 18.7266 11.3579V18.3579C18.7266 18.6412 18.6307 18.8787 18.4391 19.0704C18.2474 19.2621 18.0099 19.3579 17.7266 19.3579H1.72656C1.44323 19.3579 1.20573 19.2621 1.01406 19.0704C0.822396 18.8787 0.726562 18.6412 0.726562 18.3579V11.3579C0.726562 11.0746 0.822396 10.8371 1.01406 10.6454C1.20573 10.4537 1.44323 10.3579 1.72656 10.3579ZM2.72656 12.3579V17.3579H16.7266V12.3579H2.72656Z" fill="#EF7A0C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="26" height="23" viewBox="0 0 26 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.11545 14.108C1.72193 14.108 1.39207 13.9763 1.12587 13.7127C0.859664 13.4492 0.726562 13.1226 0.726562 12.733C0.726562 12.3434 0.859664 12.0169 1.12587 11.7533C1.39207 11.4898 1.72193 11.358 2.11545 11.358H9.0599C9.45341 11.358 9.78328 11.4898 10.0495 11.7533C10.3157 12.0169 10.4488 12.3434 10.4488 12.733C10.4488 13.1226 10.3157 13.4492 10.0495 13.7127C9.78328 13.9763 9.45341 14.108 9.0599 14.108H2.11545ZM2.11545 8.60803C1.72193 8.60803 1.39207 8.47626 1.12587 8.21272C0.859664 7.94918 0.726562 7.62262 0.726562 7.23303C0.726562 6.84345 0.859664 6.51689 1.12587 6.25335C1.39207 5.9898 1.72193 5.85803 2.11545 5.85803H14.6155C15.009 5.85803 15.3388 5.9898 15.605 6.25335C15.8712 6.51689 16.0043 6.84345 16.0043 7.23303C16.0043 7.62262 15.8712 7.94918 15.605 8.21272C15.3388 8.47626 15.009 8.60803 14.6155 8.60803H2.11545ZM2.11545 3.10803C1.72193 3.10803 1.39207 2.97626 1.12587 2.71272C0.859664 2.44918 0.726562 2.12262 0.726562 1.73303C0.726562 1.34345 0.859664 1.01689 1.12587 0.753345C1.39207 0.489803 1.72193 0.358032 2.11545 0.358032H14.6155C15.009 0.358032 15.3388 0.489803 15.605 0.753345C15.8712 1.01689 16.0043 1.34345 16.0043 1.73303C16.0043 2.12262 15.8712 2.44918 15.605 2.71272C15.3388 2.97626 15.009 3.10803 14.6155 3.10803H2.11545ZM13.2266 20.983V18.7143C13.2266 18.5309 13.2613 18.3533 13.3307 18.1815C13.4002 18.0096 13.5043 17.8549 13.6432 17.7174L20.9002 10.5674C21.1085 10.3612 21.34 10.2122 21.5946 10.1205C21.8492 10.0289 22.1039 9.98303 22.3585 9.98303C22.6363 9.98303 22.9025 10.0346 23.1571 10.1377C23.4117 10.2408 23.6432 10.3955 23.8516 10.6018L25.1363 11.8737C25.3215 12.0799 25.4661 12.3091 25.5703 12.5612C25.6745 12.8132 25.7266 13.0653 25.7266 13.3174C25.7266 13.5695 25.6803 13.8273 25.5877 14.0908C25.4951 14.3544 25.3446 14.5893 25.1363 14.7955L17.9141 21.9455C17.7752 22.083 17.6189 22.1862 17.4453 22.2549C17.2717 22.3237 17.0923 22.358 16.9071 22.358H14.6155C14.2219 22.358 13.8921 22.2263 13.6259 21.9627C13.3597 21.6992 13.2266 21.3726 13.2266 20.983ZM22.3585 14.658L23.6432 13.3174L22.3585 12.0455L21.0391 13.3518L22.3585 14.658ZM15.3099 20.2955H16.6293L20.8307 16.1018L20.2057 15.4487L19.546 14.8299L15.3099 18.9893V20.2955ZM15.3099 20.2955V18.9893L19.546 14.8299L20.8307 16.1018L16.6293 20.2955H15.3099Z" fill="#EF7A0C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in New Issue