generated from dwd/boilarplate-remix-tailwind-antd
dynamic data
Suvodip
parent
db1be21da7
commit
c665a27db8
|
|
@ -1,146 +1,43 @@
|
|||
let classmatesData = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Daniel Nguyen",
|
||||
program: "Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sarah Anderson",
|
||||
program: "Post-Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "John Smith",
|
||||
program: "Undergraduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Emily Davis",
|
||||
program: "Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Michael Johnson",
|
||||
program: "Post-Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Jessica Wilson",
|
||||
program: "Undergraduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar6.png"
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
name: "David Brown",
|
||||
program: "Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
name: "Laura Lee",
|
||||
program: "Post-Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "9",
|
||||
name: "Chris Miller",
|
||||
program: "Undergraduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "10",
|
||||
name: "Sophia Taylor",
|
||||
program: "Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "11",
|
||||
name: "James Anderson",
|
||||
program: "Post-Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "12",
|
||||
name: "Olivia Thomas",
|
||||
program: "Undergraduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar6.png"
|
||||
},
|
||||
{
|
||||
id: "13",
|
||||
name: "Ethan Martinez",
|
||||
program: "Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "14",
|
||||
name: "Ava Garcia",
|
||||
program: "Post-Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "15",
|
||||
name: "Noah Rodriguez",
|
||||
program: "Undergraduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "16",
|
||||
name: "Mia Martinez",
|
||||
program: "Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "17",
|
||||
name: "Lucas Wilson",
|
||||
program: "Post-Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "18",
|
||||
name: "Isabella Clark",
|
||||
program: "Undergraduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar6.png"
|
||||
},
|
||||
{
|
||||
id: "19",
|
||||
name: "Liam Walker",
|
||||
program: "Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "20",
|
||||
name: "Charlotte Lewis",
|
||||
program: "Post-Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar2.png"
|
||||
import React, { useEffect, useState } from 'react';
|
||||
interface Performer {
|
||||
id: number;
|
||||
name: string;
|
||||
avatar: string;
|
||||
program: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
export default function classMatesDirectory() {
|
||||
const [classmatesData, setData] = useState<Performer[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
fetch('https://iimtt-api.s38.siliconpin.com/api/class-mates')
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
.then(data => {
|
||||
setData(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
setError(error);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
if (loading) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div>Error: {error.message}</div>;
|
||||
}
|
||||
];
|
||||
export default function Index() {
|
||||
return (
|
||||
<div className=''>
|
||||
<p className='text-[18px] font-[700] text-[#525252] border-b-[1px] border-b-[#CFCFCF] py-5 pl-5 container-fluid'>
|
||||
|
|
@ -149,9 +46,9 @@ export default function Index() {
|
|||
<div className='container mx-auto grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 place-items-center p-6'>
|
||||
{classmatesData.map(data => (
|
||||
<div key={data.id} className='relative flex flex-col justify-center items-center shadow-lg w-full rounded-[10px] py-8 overflow-hidden' style={{ background: 'transparent' }}>
|
||||
<div className='absolute top-0 left-0 w-full h-1/2' style={{ backgroundImage: `url('../../assets/${data.avatar}')`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'blur(8px)'}}></div>
|
||||
<div className='absolute top-0 left-0 w-full h-1/2' style={{ backgroundImage: `url('${data.avatar}')`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'blur(8px)'}}></div>
|
||||
<div className='absolute bottom-0 left-0 w-full h-1/2 bg-[#FFF] '></div><br /><br />
|
||||
<img className='w-[60px] h-[60px] border-[4px] border-[#FFF] rounded-full z-10' src={`../../assets/${data.avatar}`} alt="" />
|
||||
<img className='w-[60px] h-[60px] border-[4px] border-[#FFF] rounded-full z-10' src={data.avatar} alt="" />
|
||||
<p className='z-10 text-[16px] font-[700] text-[]'>{data.name}</p>
|
||||
<p className='z-10 text-[12px] font-[500] text-[#6E6E6E]'>
|
||||
<span>{data.program}</span> | <span>{data.type}</span>
|
||||
|
|
@ -162,10 +59,3 @@ export default function Index() {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
{/* <div className="h-[90px] bg-cover bg-center w-full" style={{ backgroundImage: `url('../../assets/${data.avatar}')` }}>
|
||||
<img className='w-[60px] h-[60px]' src={`../../assets/${data.avatar}`} alt="" />
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quasi nisi eligendi consectetur sequi nemo doloribus, obcaecati corrupti dolorum dolores omnis magni similique. Debitis unde nam, magnam maxime magni repudiandae.</p>
|
||||
</div> */}
|
||||
|
|
@ -1,28 +1,43 @@
|
|||
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"
|
||||
import React, { useEffect, useState } from 'react';
|
||||
interface Performer {
|
||||
id: number;
|
||||
title: string;
|
||||
chapter: string;
|
||||
img: string;
|
||||
Program: string;
|
||||
}
|
||||
];
|
||||
|
||||
export default function Index() {
|
||||
export default function ContinueLearning() {
|
||||
const [courseData, setData] = useState<Performer[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
fetch('https://iimtt-api.s38.siliconpin.com/api/continue-learning')
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
.then(data => {
|
||||
setData(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
setError(error);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
if (loading) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div>Error: {error.message}</div>;
|
||||
}
|
||||
return (
|
||||
<section className='bg-[#FCFCFC]'>
|
||||
<div className='container mx-auto'>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,43 @@
|
|||
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"
|
||||
import React, { useEffect, useState } from 'react';
|
||||
interface Performer {
|
||||
id: number;
|
||||
title: string;
|
||||
img: string;
|
||||
challenge: string;
|
||||
question: string;
|
||||
}
|
||||
];
|
||||
|
||||
export default function(){
|
||||
export default function KnowledgeQuests() {
|
||||
const [knowledgeData, setData] = useState<Performer[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
fetch('https://iimtt-api.s38.siliconpin.com/api/knowledge-quests')
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
.then(data => {
|
||||
setData(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
setError(error);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
if (loading) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div>Error: {error.message}</div>;
|
||||
}
|
||||
return(
|
||||
<section className=''>
|
||||
<div className=''>
|
||||
|
|
|
|||
|
|
@ -1,397 +1,71 @@
|
|||
|
||||
|
||||
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 React, { useState, useEffect } from 'react';
|
||||
import { Modal } from 'antd';
|
||||
|
||||
interface Question {
|
||||
questionId: string;
|
||||
questionText: string;
|
||||
correctAnswer: string;
|
||||
options: string[];
|
||||
}
|
||||
|
||||
interface Quiz {
|
||||
quizId: string;
|
||||
quizName: string;
|
||||
internalMarks: string;
|
||||
attendance: string;
|
||||
attendQuestion: string;
|
||||
totalQuestion: string;
|
||||
questions: Question[];
|
||||
}
|
||||
|
||||
interface Module {
|
||||
moduleId: string;
|
||||
type: string;
|
||||
moduleName: string;
|
||||
quizzes: Quiz[];
|
||||
}
|
||||
|
||||
export default function Index() {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [selectedQuiz, setSelectedQuiz] = useState(null);
|
||||
const [selectedQuiz, setSelectedQuiz] = useState<Quiz | null>(null);
|
||||
const [quizModuleData, setQuizModuleData] = useState<Module[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
const showModal = (quiz) => {
|
||||
useEffect(() => {
|
||||
fetch('https://iimtt-api.s38.siliconpin.com/api/quiz-module')
|
||||
.then((res) => {
|
||||
if (!res.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => {
|
||||
// console.log('Fetched data:', data);
|
||||
// Extract the modules array from the response
|
||||
if (data && Array.isArray(data.modules)) {
|
||||
setQuizModuleData(data.modules);
|
||||
} else {
|
||||
setError(new Error('Fetched data is not an array'));
|
||||
}
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error fetching data:', error);
|
||||
setError(error);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div>Error: {error.message}</div>;
|
||||
}
|
||||
|
||||
const showModal = (quiz: Quiz) => {
|
||||
setSelectedQuiz(quiz);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
|
@ -409,8 +83,8 @@ export default function Index() {
|
|||
return (
|
||||
<section className="">
|
||||
<div className="flex flex-col">
|
||||
{
|
||||
quizModuleData.modules.map((moduleData) => (
|
||||
{quizModuleData.length > 0 ? (
|
||||
quizModuleData.map((moduleData) => (
|
||||
<div key={moduleData.moduleId}>
|
||||
<div className="p-6">
|
||||
<p className="text-[16px] font-[700] text-[#EF7A0C]">{moduleData.type}</p>
|
||||
|
|
@ -418,13 +92,19 @@ export default function Index() {
|
|||
<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}>
|
||||
{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>
|
||||
<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>Internal Marks: {quizData.internalMarks}</span>
|
||||
•
|
||||
<span>Attendance: {quizData.attendance}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -436,12 +116,13 @@ export default function Index() {
|
|||
<img src="../../assets/right-arrow.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
) : (
|
||||
<div>No quiz modules available.</div>
|
||||
)}
|
||||
</div>
|
||||
{selectedQuiz && (
|
||||
<Modal title={selectedQuiz.quizName} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={1000}>
|
||||
|
|
@ -451,7 +132,7 @@ export default function Index() {
|
|||
<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'>
|
||||
<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>
|
||||
|
|
@ -463,8 +144,10 @@ export default function Index() {
|
|||
<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>
|
||||
<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>
|
||||
|
|
@ -475,8 +158,10 @@ export default function Index() {
|
|||
<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>
|
||||
<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>
|
||||
|
|
@ -484,12 +169,16 @@ export default function Index() {
|
|||
</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-[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]'> {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]"> {questionData.correctAnswer}</p>
|
||||
</div>
|
||||
<ul>
|
||||
{/* {questionData.options.map((option, index) => (
|
||||
|
|
|
|||
|
|
@ -1,130 +1,43 @@
|
|||
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"
|
||||
import React, { useEffect, useState } from 'react';
|
||||
interface Performer {
|
||||
quizId: number;
|
||||
quizType: string;
|
||||
quizName: string;
|
||||
percentage: string;
|
||||
}
|
||||
]
|
||||
|
||||
export default function Index(){
|
||||
export default function quizScoreData() {
|
||||
const [quizData, setData] = useState<Performer[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
fetch('https://iimtt-api.s38.siliconpin.com/api/quiz-score')
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
.then(data => {
|
||||
setData(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
setError(error);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
if (loading) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div>Error: {error.message}</div>;
|
||||
}
|
||||
return(
|
||||
<section>
|
||||
<div className="border-[1px] border-[#CFCFCF] rounded-t-[10px]" style={{background: 'linear-gradient(138.22deg, #4377C6 0%, #092E76 180.99%)'}}>
|
||||
|
|
@ -148,5 +61,5 @@ export default function Index(){
|
|||
)
|
||||
}
|
||||
|
||||
|
||||
// quiz-details
|
||||
{/* <Progress type="dashboard" percent={75} gapDegree={30} /> */}
|
||||
|
|
@ -1,215 +1,60 @@
|
|||
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"
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
interface Performer {
|
||||
id: number;
|
||||
name: string;
|
||||
rank: number;
|
||||
avatar: string;
|
||||
score: number;
|
||||
program: string;
|
||||
points: number;
|
||||
}
|
||||
];
|
||||
|
||||
const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));
|
||||
export default function TopPerformers() {
|
||||
const [data, setData] = useState<Performer[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
const highestRank = sortedData[0];
|
||||
const secondHighestRank = sortedData[1];
|
||||
const thirdHighestRank = sortedData[2];
|
||||
useEffect(() => {
|
||||
fetch('https://iimtt-api.s38.siliconpin.com/api/top-performers')
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
.then(data => {
|
||||
const sortedData: Performer[] = data.sort((a: Performer, b: Performer) => a.rank - b.rank);
|
||||
setData(sortedData);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
setError(error);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
// console.log('The highest rank is:', highestRank);
|
||||
// console.log('The second highest rank is:', secondHighestRank);
|
||||
// console.log('The Third highest rank is:', thirdHighestRank);
|
||||
if (loading) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div>Error: {error.message}</div>;
|
||||
}
|
||||
|
||||
const [highestRank, secondHighestRank, thirdHighestRank, ...sortedData] = data;
|
||||
|
||||
export default function(){
|
||||
return (
|
||||
<div className=''>
|
||||
<h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>Top Performers <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
||||
<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='mx-auto h-[52px] w-[60px]' src={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>
|
||||
|
|
@ -218,7 +63,7 @@ export default function(){
|
|||
<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='mx-auto h-[52px] w-[60px]' src={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>
|
||||
|
|
@ -226,7 +71,7 @@ export default function(){
|
|||
</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='mx-auto h-[52px] w-[60px]' src={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>
|
||||
|
|
@ -234,10 +79,10 @@ export default function(){
|
|||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
{sortedData.slice(3).map(data => (
|
||||
{sortedData.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="" />
|
||||
<img className='w-[35px] h-[35px]' src={data.avatar} alt="" />
|
||||
<div>
|
||||
<p className='text-[14px] font-[700]'>{data.name}</p>
|
||||
<p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
|
||||
|
|
@ -250,5 +95,5 @@ export default function(){
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue