generated from dwd/boilarplate-remix-tailwind-antd
65 lines
2.5 KiB
TypeScript
65 lines
2.5 KiB
TypeScript
import { Flex, Progress } from 'antd';
|
|
import React, { useEffect, useState } from 'react';
|
|
interface Performer {
|
|
quizId: number;
|
|
quizType: string;
|
|
quizName: string;
|
|
percentage: string;
|
|
}
|
|
|
|
export default function quizScoreData() {
|
|
const [quizData, setData] = useState<Performer[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<Error | null>(null);
|
|
|
|
|
|
useEffect(() => {
|
|
fetch('http://localhost:5174/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%)'}}>
|
|
<h2 className="text-[20px] font-[700] text-[#FFF] p-4">Quizzes score</h2>
|
|
<div className="flex flex-col">
|
|
{quizData.slice(0, 10).map((data => (
|
|
<a key={data.quizId} 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} size={40} strokeColor="#EF7A0C" format={(percent) => (<span style={{ fontWeight: 700 }}>{percent}%</span>)}/>
|
|
<img src="../../assets/right-arrow.svg" alt="" />
|
|
</div>
|
|
</a>
|
|
)))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
// quiz-details
|
|
{/* <Progress type="dashboard" percent={75} gapDegree={30} /> */} |