created quiz component countdown timer

src/pages/Quiz/Options.module.scss

@@ -7,7 +7,7 @@
             justify-content: space-around;
             height: 40vh;
 
-            .options {
+            ion-item {
                 width: 99%;
                 margin: 0 auto;
                 --background: white;

src/pages/Quiz/Options.tsx

@@ -15,7 +15,7 @@ const Options: React.FC<OwnProps> = (props) => {
 
     const options = props.options.map((option, key) => {
         return (
-            <IonItem lines='none' key={key} className={styles.options + " " + (option === selected) ? styles.highlighted : ""}>
+            <IonItem lines='none' key={key} className={(option === selected) ? styles.highlighted : ""}>
                 <IonLabel>{option}</IonLabel>
                 <IonRadio mode='md' slot="start" value={option} />
             </IonItem>

src/pages/Quiz/Question.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { createRef, useEffect, useRef, useState } from "react";
 import styles from "./Question.module.scss";
 
 
@@ -8,8 +8,31 @@ interface OwnProp {
     timeLimit: number;
 }
 
+
+let timeout: NodeJS.Timeout;
+
 const Question: React.FC<OwnProp> = (props) => {
 
+    const COUNTDOWN_AMOUNT_TOTAL = props.timeLimit * 60;
+
+    const [seconds, setSeconds] = useState<number>(COUNTDOWN_AMOUNT_TOTAL);
+
+    const displaySeconds = seconds % 60;
+    const displayMinutes = Math.floor(seconds / 60);
+
+    useEffect(() => {
+
+        if (seconds > 0) {
+            timeout = setTimeout(() => {
+                setSeconds((state) => state - 1);
+            }, 1000);
+        } else {
+            clearTimeout(timeout);
+        }
+
+        return () => clearTimeout(timeout);;
+    }, [seconds]);
+
     return (
         <section>
             <div className={styles.questionHolder}>
@@ -22,7 +45,9 @@ const Question: React.FC<OwnProp> = (props) => {
 
                 <div className={styles.quizTimer}>
                     <div className={styles.border}>
-                        <div className={styles.time}>01:00</div>
+                        <div className={styles.time}>
+                            {`${displayMinutes < 10 ? "0" : ""}${displayMinutes}:${displaySeconds < 10 ? "0" : ""}${displaySeconds}`}
+                        </div>
                     </div>
                 </div>
             </div>

src/pages/Quiz/Quiz.module.scss

@@ -34,6 +34,11 @@
                 align-self: flex-end;
             }
 
+            a {
+                text-decoration: none;
+                align-self: flex-end;
+            }
+
             ion-icon {
                 color: white;
                 margin-right: 3rem;
@@ -43,44 +48,6 @@
 
             }
         }
-
-        // .questionHolder {
-        //     display: flex;
-        //     flex-direction: column;
-        //     align-items: center;
-        //     justify-content: space-between;
-        //     text-align: center;
-        //     color: white;
-        //     width: 90%;
-        //     margin: 0 auto;
-        //     height: 27vh;
-        //     background-image: url("../../assets/icons/desktop-particles.svg");
-        //     background-position: center;
-        //     background-repeat: no-repeat;
-        //     background-size: 150% 150%;
-
-        //     .questionNumber {
-        //         font-size: 1.3rem;
-        //         font-weight: 600;
-        //     }
-        //     .question {
-        //         font-size: 1.8rem;
-        //         font-weight: 300;
-        //     }
-
-        //     .quizTimer {
-        //         .border {
-        //             width: 6rem;
-        //             height: 6rem;
-        //             border-radius: 50%;
-        //             border: 0.2rem solid #6BD534;
-        //             .time {
-        //                 margin-top: 1.8rem;
-        //                 font-size: 1.4rem;
-        //             }
-        //         }
-        //     }
-        // }
     }
 
     .quizOptions {

src/pages/Quiz/Quiz.tsx

@@ -31,7 +31,9 @@ const Quiz: React.FC = () => {
             <div className={styles.upfold}>
                 <header className={styles.header}>
                     <h4 className={styles.heading}>Quiz</h4>
-                    <IonIcon icon={closeOutline} />
+                    <Link to="/interviewRounds" >
+                        <IonIcon icon={closeOutline} />
+                    </Link>
                 </header>
 
                 <Question question='How would you correctly display, “Hello, how are you?”?'

src/pages/preliminaryRound/PreliminaryRound.module.scss

@@ -75,6 +75,9 @@
             }
         }
 
+        a {
+            text-decoration: none;
+        }
         ion-button {
             --background: var(--primary-button-color);
             font-weight: 500;

src/pages/preliminaryRound/PreliminaryRound.tsx

@@ -6,6 +6,7 @@ import StepHeader from '../../components/stepsHeader/StepHeader';
 import questionIcon from '../../assets/icons/question-circle-fill.svg';
 import checkIcon from '../../assets/icons/check-circle-fill.svg';
 import timeIcon from '../../assets/icons/time.svg';
+import { Link } from "react-router-dom";
 
 const PreliminaryRound: React.FC = () => {
     return (
@@ -38,7 +39,9 @@ const PreliminaryRound: React.FC = () => {
                         </div>
                     </div>
 
-                    <IonButton shape="round" expand='block'>Start quiz</IonButton>
+                    <Link to="./quiz">
+                        <IonButton shape="round" expand='block'>Start quiz</IonButton>
+                    </Link>
 
                     <div className={styles.wish}>All the best!</div>
                 </div>