installed CircularProgressbar libary and recreated the quiz countdown timer

package-lock.json

@@ -29,6 +29,7 @@
         "node": "^17.7.2",
         "node-sass": "^7.0.1",
         "react": "^17.0.1",
+        "react-circular-progressbar": "^2.0.4",
         "react-countdown-circle-timer": "^3.0.9",
         "react-dom": "^17.0.1",
         "react-router": "^5.2.0",
@@ -13121,6 +13122,14 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-circular-progressbar": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.0.4.tgz",
+      "integrity": "sha512-OfX0ThSxRYEVGaQSt0DlXfyl5w4DbXHsXetyeivmoQrh9xA9bzVPHNf8aAhOIiwiaxX2WYWpLDB3gcpsDJ9oww==",
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-countdown-circle-timer": {
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/react-countdown-circle-timer/-/react-countdown-circle-timer-3.0.9.tgz",
@@ -26126,6 +26135,12 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-circular-progressbar": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.0.4.tgz",
+      "integrity": "sha512-OfX0ThSxRYEVGaQSt0DlXfyl5w4DbXHsXetyeivmoQrh9xA9bzVPHNf8aAhOIiwiaxX2WYWpLDB3gcpsDJ9oww==",
+      "requires": {}
+    },
     "react-countdown-circle-timer": {
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/react-countdown-circle-timer/-/react-countdown-circle-timer-3.0.9.tgz",

package.json

@@ -24,6 +24,7 @@
     "node": "^17.7.2",
     "node-sass": "^7.0.1",
     "react": "^17.0.1",
+    "react-circular-progressbar": "^2.0.4",
     "react-countdown-circle-timer": "^3.0.9",
     "react-dom": "^17.0.1",
     "react-router": "^5.2.0",

src/mockData/QuizDetails.ts

@@ -11,7 +11,7 @@ const QUIZ_DETAILS: QuizDetails[] = [
         ],
         answer: ["System.out.println('Hello, how are you?');"],
         result: false,
-        timeLimit: 10,
+        timeLimit: 5,
         type: "singleSelect"
     },
     {
@@ -24,7 +24,7 @@ const QUIZ_DETAILS: QuizDetails[] = [
         ],
         answer: ["alert('Hello World');"],
         result: false,
-        timeLimit: 20,
+        timeLimit: 10,
         type: "singleSelect"
 
     },
@@ -38,7 +38,7 @@ const QUIZ_DETAILS: QuizDetails[] = [
         ],
         answer: ["B", "C"],
         result: false,
-        timeLimit: 35,
+        timeLimit: 15,
         type: "multiSelect"
     },
     {

src/pages/quiz/Question.module.scss

@@ -28,6 +28,10 @@ section {
             .time {
                 font-size: 1.4rem;
             }
+            .progressBar{
+                width: 5.5rem;
+                height: 5.5rem;
+            }
         }
     }
 }

src/pages/quiz/Question.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
 import styles from "./Question.module.scss";
-import { CountdownCircleTimer } from 'react-countdown-circle-timer';
 import { secondsToMinutes } from "date-fns";
+import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
+import 'react-circular-progressbar/dist/styles.css';
 
 interface OwnProp {
     questionNumber: number;
@@ -15,6 +16,9 @@ const Question: React.FC<OwnProp> = (props) => {
     const [seconds, setSeconds] = useState<number>(props.timeLimit);
     const [duration, setDuration] = useState<number>(props.timeLimit);
     const displaySeconds = seconds % 60;
+    const percentage = Math.round(seconds / props.timeLimit * 100);
+    const time = `${secondsToMinutes(seconds).toString().padStart(2, '0')}:${displaySeconds.toString().padStart(2, '0')}`
+
 
     useEffect(() => {
         setSeconds(props.timeLimit);
@@ -35,19 +39,6 @@ const Question: React.FC<OwnProp> = (props) => {
 
     }, [seconds]);
 
-    console.log("seconds", seconds);
-
-
-    const renderTime = () => {
-        return (
-            <div className={styles.time}>
-                {
-                    `${secondsToMinutes(seconds).toString().padStart(2, '0')}:
-                    ${displaySeconds.toString().padStart(2, '0')}`
-                }
-            </div>
-        );
-    }
 
     return (
         <section>
@@ -60,20 +51,18 @@ const Question: React.FC<OwnProp> = (props) => {
                 </div>
 
                 <div className={styles.quizTimer}>
-
-                    <CountdownCircleTimer
-                        isPlaying
-                        duration={duration}
-                        colors={'#6BD534'}
-                        size={60}
-                        onComplete={() => {
-                            return { shouldRepeat: true, delay: 1.5 }
-                        }}
-                        strokeWidth={5} >
-
-                        {renderTime}
-
-                    </CountdownCircleTimer>
+                    <div className={styles.progressBar}>
+                        <CircularProgressbar
+                            value={percentage}
+                            text={`${time}`}
+                            counterClockwise={true}
+                            styles={buildStyles({
+                                trailColor: '#ffff',
+                                pathColor: '#6BD534',
+                                textColor: "#ffff",
+                                textSize: "2.4rem"
+                            })} />;
+                    </div>
                 </div>
             </div>
         </section>