partially created questions component

src/pages/Quiz/Question.module.scss

@@ -0,0 +1,40 @@
+section {
+
+    .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;
+                }
+            }
+        }
+    }
+}

src/pages/Quiz/Question.tsx

@@ -0,0 +1,33 @@
+import { useState } from "react";
+import styles from "./Question.module.scss";
+
+
+interface OwnProp {
+    questionNumber: number;
+    question: string;
+    timeLimit: number;
+}
+
+const Question: React.FC<OwnProp> = (props) => {
+
+    return (
+        <section>
+            <div className={styles.questionHolder}>
+
+                <div className={styles.questionNumber}>Question {props.questionNumber}</div>
+
+                <div className={styles.question}>
+                    {props.question}
+                </div>
+
+                <div className={styles.quizTimer}>
+                    <div className={styles.border}>
+                        <div className={styles.time}>01:00</div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}
+
+export default Question;

src/pages/Quiz/Quiz.module.scss

@@ -44,43 +44,43 @@
             }
         }
 
-        .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%;
+        // .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;
-            }
+        //     .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;
-                    }
-                }
-            }
-        }
+        //     .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

@@ -5,6 +5,7 @@ import Options from './Options';
 import { closeOutline } from 'ionicons/icons'
 import { Link } from 'react-router-dom';
 import { useState } from 'react';
+import Question from './Question';
 
 
 const options: string[] = [
@@ -33,20 +34,9 @@ const Quiz: React.FC = () => {
                     <IonIcon icon={closeOutline} />
                 </header>
 
-                <div className={styles.questionHolder}>
-
-                    <div className={styles.questionNumber}>Question 01</div>
-
-                    <div className={styles.question}>
-                        How would you correctly display, “Hello, how are you?”?
-                    </div>
-
-                    <div className={styles.quizTimer}>
-                        <div className={styles.border}>
-                            <div className={styles.time}>01:00</div>
-                        </div>
-                    </div>
-                </div>
+                <Question question='How would you correctly display, “Hello, how are you?”?'
+                    questionNumber={1}
+                    timeLimit={1} />
 
             </div>