ui changes, fix errors

app/(main)/quiz/[quiz_id]/results/page.tsx

@@ -19,16 +19,25 @@ interface IParams {
 const Page = ({ params }: IParams) => {
   const [data, setData] = useState<Data>();
   const [tab, setTab] = useState<number | string>(0);
+  const [loading, setLoading] = useState<boolean>(false);
   const { resultData, error } = useQuizResults();
 
   useEffect(() => {
     if (!resultData.length && !error) {
+      setLoading(true);
       Queries.getQuizById(params.quiz_id)
-        .then((res) => setData(res.data))
+        .then((res) => {
-        .catch(() => notFound());
+          setData(res.data);
+          setLoading(false);
+        })
+        .catch(() => {
+          setLoading(false);
+          notFound();
+        });
     }
   }, [resultData, error]);
 
+
   return (
     <section className="container py-[40px]">
       <div className="flex flex-col w-full py-[40px] gap-[80px]">
@@ -38,6 +47,7 @@ const Page = ({ params }: IParams) => {
           steps={data?.steps ? data?.steps : []}
           tab={tab}
           setStep={setTab}
+          loading={loading}
         />
         {tab === "results" && (
           <QuizTapgyrResults

components/quiz/QuizHeader.tsx

@@ -17,11 +17,10 @@ const QuizHeader = ({ data }: { data: Data | undefined }) => {
       {(data?.banner || data?.banner_mobile) && (
         <>
           {data.banner_mobile && (
-            <div className="w-full relative bg-[#E1E0FF] rounded-[8px] overflow-hidden md:hidden object-cover">
+            <div className="w-full relative bg-[#E1E0FF] h-[100px] rounded-[8px] overflow-hidden md:hidden object-cover">
               <Image
                 src={data.banner_mobile ? data.banner_mobile : data.banner}
                 alt="banner"
-                height={100}
                 unselectable="off"
                 className="object-cover"
                 fill

components/quiz/QuizQuestion.tsx

@@ -57,7 +57,7 @@ const QuizQuestion = ({
                 {question}
               </h2>
 
-              <div className="flex flex-wrap justify-center md:justify-start md:gap-5 gap-[10px]">
+              <div className="flex flex-wrap md:gap-5 gap-[10px]">
                 <div className="flex gap-2 items-center">
                   <div
                     className={`w-[18px] h-[18px] md:w-4 md:h-4 ${
@@ -121,7 +121,7 @@ const QuizQuestion = ({
             {question}
           </h2>
 
-          <div className="flex flex-wrap justify-center md:justify-start md:gap-5 gap-[10px]">
+          <div className="flex flex-wrap md:gap-5 gap-[10px]">
             <div className="flex gap-2 items-center">
               <div
                 className={`w-[18px] h-[18px] md:w-4 md:h-4 ${

components/quiz/QuizResultsTabs.tsx

@@ -8,39 +8,42 @@ interface IQuizTabProps {
   }[];
   setStep: React.Dispatch<React.SetStateAction<number | string>>;
   tab: number | string;
+  loading: boolean;
 }
 
-function QuizResultsTabs({ steps, setStep, tab }: IQuizTabProps) {
+function QuizResultsTabs({ steps, setStep, tab, loading }: IQuizTabProps) {
   return (
-    <div className="flex gap-[10px] w-full md:w-1/2 self-center">
+    !loading && (
-      {steps.map((item) => (
+      <div className="flex gap-[10px] w-full md:w-1/2 self-center">
+        {steps.map((item) => (
+          <button
+            onClick={() => {
+              setStep(item.tapgyr - 1);
+            }}
+            key={item.tapgyr}
+            className={`flex-1 py-[5px] rounded-lg transition-all duration-300 ${
+              tab === item.tapgyr - 1
+                ? "bg-lightPrimary text-white"
+                : "bg-lightPrimaryContainer text-textLight"
+            }`}
+          >
+            {item.tapgyr}
+          </button>
+        ))}
         <button
           onClick={() => {
-            setStep(item.tapgyr - 1);
+            setStep("results");
           }}
-          key={item.tapgyr}
           className={`flex-1 py-[5px] rounded-lg transition-all duration-300 ${
-            tab === item.tapgyr - 1
+            tab === "results"
               ? "bg-lightPrimary text-white"
               : "bg-lightPrimaryContainer text-textLight"
           }`}
         >
-          {item.tapgyr}
+          Netije
         </button>
-      ))}
+      </div>
-      <button
+    )
-        onClick={() => {
-          setStep("results");
-        }}
-        className={`flex-1 py-[5px] rounded-lg transition-all duration-300 ${
-          tab === "results"
-            ? "bg-lightPrimary text-white"
-            : "bg-lightPrimaryContainer text-textLight"
-        }`}
-      >
-        Netije
-      </button>
-    </div>
   );
 }
 

components/quiz/QuizTapgyrWinners.tsx

@@ -137,8 +137,9 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
                       (data[id - 1] as Datum).correct_answers_time
                       ? id
                       : (winner as ISearchNetije).tapgyr_breakdown
-                      ? (winner as ISearchNetije).tapgyr_breakdown[tapgyr - 1]
+                      ? (winner as ISearchNetije).tapgyr_breakdown.find(
-                          .tapgyr_place
+                          (item) => item.tapgyr === tapgyr
+                        )?.tapgyr_place
                       : id + 1}
                   </th>
                   {/* Phone number */}
@@ -191,7 +192,7 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
                               ? matchingAnswer.serial_number_for_correct
                               : matchingAnswer && matchingAnswer?.score === 0
                               ? "X"
-                              : "0"}
+                              : "-"}
                           </span>
                         );
                       })}
@@ -203,12 +204,12 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
                       <span className="border border-[#2C7CDA] text-[#2C7CDA] rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] ">
                         {(winner as Datum).correct_answers_time
                           ? (winner as Datum).correct_answers_time
-                          : (winner as ISearchNetije).tapgyr_breakdown[
+                          : (winner as ISearchNetije).tapgyr_breakdown.find(
-                              tapgyr - 1
+                              (item) => item.tapgyr === tapgyr
-                            ].tapgyr_total_nobat
+                            )?.tapgyr_total_nobat
-                          ? (winner as ISearchNetije).tapgyr_breakdown[
+                          ? (winner as ISearchNetije).tapgyr_breakdown.find(
-                              tapgyr - 1
+                              (item) => item.tapgyr === tapgyr
-                            ].tapgyr_total_nobat
+                            )?.tapgyr_total_nobat
                           : "-"}
                       </span>
                     </div>
@@ -219,12 +220,12 @@ const QuizTapgyrWinners = ({ id, tapgyr, questions }: IProps) => {
                       <span className="bg-fillOrange rounded-full w-[36px] h-[36px] flex justify-center items-center text-base leading-[125%] text-white">
                         {(winner as Datum).total_score_of_client
                           ? (winner as Datum).total_score_of_client
-                          : (winner as ISearchNetije).tapgyr_breakdown[
+                          : (winner as ISearchNetije).tapgyr_breakdown.find(
-                              tapgyr - 1
+                              (item) => item.tapgyr === tapgyr
-                            ].tapgyr_total_score
+                            )?.tapgyr_total_score
-                          ? (winner as ISearchNetije).tapgyr_breakdown[
+                          ? (winner as ISearchNetije).tapgyr_breakdown.find(
-                              tapgyr - 1
+                              (item) => item.tapgyr === tapgyr
-                            ].tapgyr_total_score
+                            )?.tapgyr_total_score
                           : "-"}
                       </span>
                     </div>

components/quiz/QuizWinnerTable.tsx

@@ -169,7 +169,7 @@ const QuizWinnerTable = ({ quizId, questionsData }: IProps) => {
                                     : matchingAnswer &&
                                       matchingAnswer?.score === 0
                                     ? "X"
-                                    : "0"}
+                                    : "-"}
                                 </span>
                               );
                             })
@@ -237,7 +237,7 @@ const QuizWinnerTable = ({ quizId, questionsData }: IProps) => {
                                 ? matchingAnswer.serial_number_for_correct
                                 : matchingAnswer && matchingAnswer?.score === 0
                                 ? "X"
-                                : "0"}
+                                : "-"}
                             </span>
                           );
                         })}
@@ -364,7 +364,7 @@ const QuizWinnerTable = ({ quizId, questionsData }: IProps) => {
                                         : matchingAnswer &&
                                           matchingAnswer?.score === 0
                                         ? "X"
-                                        : "0"}
+                                        : "-"}
                                     </span>
                                   );
                                 })
@@ -440,7 +440,7 @@ const QuizWinnerTable = ({ quizId, questionsData }: IProps) => {
                                     : matchingAnswer &&
                                       matchingAnswer?.score === 0
                                     ? "X"
-                                    : "0"}
+                                    : "-"}
                                 </span>
                               );
                             })}