fix(ui): fix results screen

2025-07-22 17:59:15 +06:00
parent 5245ab878d
commit 341a46e788
8 changed files with 450 additions and 323 deletions
--- a/components/QuestionItem.tsx
+++ b/components/QuestionItem.tsx
@ -0,0 +1,130 @@
+import { Question } from "@/types/exam";
+import { BookmarkCheck, Bookmark } from "lucide-react";
+import React, { useState } from "react";
+import { Badge } from "./ui/badge";
+
+interface ResultItemProps {
+  mode: "result";
+  question: Question;
+  selectedAnswer: string | undefined;
+}
+
+interface ExamItemProps {
+  mode: "exam";
+  question: Question;
+  selectedAnswer?: string;
+  handleSelect: (questionId: number, option: string) => void;
+}
+
+type QuestionItemProps = ResultItemProps | ExamItemProps;
+
+const QuestionItem = (props: QuestionItemProps) => {
+  const [bookmark, setBookmark] = useState(false);
+  const { question, selectedAnswer } = props;
+
+  const isExam = props.mode === "exam";
+
+  return (
+    <div className="border-[0.5px] border-[#8abdff]/60 rounded-2xl p-4 flex flex-col">
+      <h3 className="text-xl font-medium mb-[20px]">
+        {question.id}. {question.question}
+      </h3>
+
+      <div className="flex justify-between items-center mb-4">
+        <div></div>
+        <button onClick={() => setBookmark(!bookmark)}>
+          {bookmark ? (
+            <BookmarkCheck size={25} color="#113768" />
+          ) : (
+            <Bookmark size={25} color="#113768" />
+          )}
+        </button>
+      </div>
+
+      {isExam ? (
+        <div className="flex flex-col gap-4 items-start">
+          {Object.entries(question.options).map(([key, value]) => {
+            const isSelected = selectedAnswer === key;
+
+            return (
+              <button
+                key={key}
+                className="flex items-center gap-3"
+                onClick={
+                  isExam
+                    ? () => props.handleSelect(question.id, key)
+                    : undefined
+                }
+                disabled={!isExam}
+              >
+                <span
+                  className={`flex items-center rounded-full border px-1.5 ${
+                    isSelected ? "text-white bg-[#113768] border-[#113768]" : ""
+                  }`}
+                >
+                  {key.toUpperCase()}
+                </span>
+                <span className="option-description">{value}</span>
+              </button>
+            );
+          })}
+        </div>
+      ) : (
+        <>
+          <div className="flex justify-between items-center">
+            <div></div>
+
+            {!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>
+            ) : (
+              <Badge className="bg-red-500 text-white" variant="default">
+                Incorrect
+              </Badge>
+            )}
+          </div>
+          <div className="flex flex-col gap-4 items-start">
+            {Object.entries(question.options).map(([key, value]) => {
+              const isCorrect = key === question.correctAnswer;
+              const isSelected = key === selectedAnswer?.answer;
+
+              let optionStyle =
+                "px-2 py-1 flex items-center rounded-full border font-medium text-sm";
+
+              if (isCorrect) {
+                optionStyle += " bg-green-600 text-white border-green-600";
+              }
+
+              if (isSelected && !isCorrect) {
+                optionStyle += " bg-red-600 text-white border-red-600";
+              }
+
+              if (!isCorrect && !isSelected) {
+                optionStyle += " border-gray-300 text-gray-700";
+              }
+
+              return (
+                <div key={key} className="flex items-center gap-3">
+                  <span className={optionStyle}>{key.toUpperCase()}</span>
+                  <span className="option-description">{value}</span>
+                </div>
+              );
+            })}
+          </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>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default QuestionItem;