generated from dwd/boilarplate-remix-tailwind-antd
master
Suvodip
parent
c665a27db8
commit
f65b67b2a5
|
|
@ -1,383 +1,68 @@
|
|||
import {Layout, Menu, theme, Button, Modal, MenuProps, Tabs} from 'antd';
|
||||
import { 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));
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
const highestRank = sortedData[0];
|
||||
const secondHighestRank = sortedData[1];
|
||||
const thirdHighestRank = sortedData[2];
|
||||
interface Performer {
|
||||
id: number;
|
||||
img: string;
|
||||
title: string;
|
||||
challenge: string;
|
||||
question: string;
|
||||
}
|
||||
|
||||
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">
|
||||
const [knowledgeDataAll, setKnowledgeDataAll] = useState<Performer[]>([]);
|
||||
const [knowledgeCompleted, setKnowledgeCompleted] = useState<Performer[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const [allResponse, completedResponse] = await Promise.all([
|
||||
fetch('https://iimtt-api.s38.siliconpin.com/api/all-assesment'),
|
||||
fetch('https://iimtt-api.s38.siliconpin.com/api/complete-assesment')
|
||||
]);
|
||||
|
||||
if (!allResponse.ok || !completedResponse.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
|
||||
const allData = await allResponse.json();
|
||||
const completedData = await completedResponse.json();
|
||||
|
||||
setKnowledgeDataAll(allData);
|
||||
setKnowledgeCompleted(completedData);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
if (error instanceof Error) {
|
||||
setError(error);
|
||||
} else {
|
||||
setError(new Error('An unexpected error occurred'));
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div>Error: {error.message}</div>;
|
||||
}
|
||||
|
||||
const tabItems = [
|
||||
{
|
||||
key: '1',
|
||||
label: 'All',
|
||||
children: (
|
||||
<div className='flex flex-col gap-6'>
|
||||
{knowledgeData.map(data => (
|
||||
{knowledgeDataAll.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="" />
|
||||
|
|
@ -391,10 +76,14 @@ export default function Index(){
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane tab="Completed" key="2">
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'Completed',
|
||||
children: (
|
||||
<div className='flex flex-col gap-6'>
|
||||
{knowledgeData.map(data => (
|
||||
{knowledgeCompleted.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="" />
|
||||
|
|
@ -408,62 +97,17 @@ export default function Index(){
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Review</p>
|
||||
<a href='#' className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Review</a>
|
||||
</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>
|
||||
)
|
||||
),
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className=''>
|
||||
<Tabs defaultActiveKey="1" items={tabItems} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -24,6 +24,7 @@ export default function TopPerformers() {
|
|||
return res.json();
|
||||
})
|
||||
.then(data => {
|
||||
// console.log(data)
|
||||
const sortedData: Performer[] = data.sort((a: Performer, b: Performer) => a.rank - b.rank);
|
||||
setData(sortedData);
|
||||
setLoading(false);
|
||||
|
|
@ -64,7 +65,7 @@ export default function TopPerformers() {
|
|||
<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='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
|
||||
<img className='absolute mt-9' 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>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import ExaminationIcon from '~/components/customIcon/ExaminationIcon';
|
|||
import CommunityIcon from '~/components/customIcon/CommunityIcon';
|
||||
import NotificationIcon from '~/components/customIcon/NotificationIcon';
|
||||
import KnowledgeQuestsPageContent from '~/components/KnowledgeQuestsPageContent';
|
||||
import TopPerformers from '~/components/TopPerformers';
|
||||
import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd';
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import '../../public/assets/left_side_nav.css';
|
||||
|
|
@ -33,7 +34,7 @@ const items2: MenuProps['items'] = [
|
|||
},
|
||||
{
|
||||
key: '2sd',
|
||||
label: (<a href='#'>Classmate Directory</a>),
|
||||
label: (<a href='/classmate-directory'>Classmate Directory</a>),
|
||||
},
|
||||
{
|
||||
key: '3sd',
|
||||
|
|
@ -223,9 +224,18 @@ const App: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
{/* Place Content from here */}
|
||||
<div>
|
||||
<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]'>
|
||||
<KnowledgeQuestsPageContent />
|
||||
</div>
|
||||
<div className='xl:col-span-2'>
|
||||
<TopPerformers />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Reference in New Issue