feat(ui): add modal functionality, leaderboard view

This commit is contained in:
shafin-r
2025-07-10 19:28:50 +06:00
parent 64fc4d9a9a
commit 71eeafdaee
9 changed files with 358 additions and 83 deletions

View File

@ -31,18 +31,18 @@ const QuestionItem = ({ question, selectedAnswer }: QuestionItemProps) => (
<div className="flex justify-between items-center">
<div></div>
{selectedAnswer?.answer === question.correctAnswer ? (
{!selectedAnswer ? (
<Badge className="bg-yellow-500" variant="destructive">
Skipped
</Badge>
) : selectedAnswer.answer === question.correctAnswer ? (
<Badge className="bg-green-500 text-white" variant="default">
Correct
</Badge>
) : selectedAnswer?.answer !== question.correctAnswer ? (
) : (
<Badge className="bg-red-500 text-white" variant="default">
Incorrect
</Badge>
) : (
<Badge className="bg-yellow-500" variant="destructive">
Skipped
</Badge>
)}
</div>
@ -74,7 +74,7 @@ const QuestionItem = ({ question, selectedAnswer }: QuestionItemProps) => (
);
})}
</div>
<div className="h-[0.5px] border-[0.5px] border-dashed border-black/20"></div>
<div className="flex flex-col gap-2">
<h3 className="text-lg font-bold text-black/40">Solution:</h3>
<p className="text-lg">{question.solution}</p>
@ -96,6 +96,7 @@ export default function ResultsPage() {
try {
examResults = useExamResults();
console.log(examResults);
} catch (error) {
// Handle case where there's no completed exam
return (
@ -221,12 +222,16 @@ export default function ResultsPage() {
return (
<div className="min-h-screen bg-white">
<button className="p-10" onClick={() => router.push("/unit")}>
<button className="p-10" onClick={() => handleBackToHome()}>
<ArrowLeft size={30} color="black" />
</button>
<div className="bg-white rounded-lg shadow-lg px-10 pb-20">
<h1 className="text-2xl font-bold text-gray-900 mb-4 text-center">
Keep up the good work!
<h1 className="text-2xl font-bold text-[#113768] mb-4 text-center">
{examResults?.score < 30
? "Try harder!"
: examResults?.score < 70
? "Getting Better"
: "You did great!"}
</h1>
{/* Score Display */}
@ -246,16 +251,6 @@ export default function ResultsPage() {
/>
))}
</div>
<div className="flex gap-4 items-center mb-6 text-sm text-gray-600">
<div className="flex items-center gap-2">
<div className="w-4 h-4 bg-green-600 rounded-full"></div>{" "}
Correct
</div>
<div className="flex items-center gap-2">
<div className="w-4 h-4 bg-red-600 rounded-full"></div> Your
Answer (Incorrect)
</div>
</div>
</div>
)}