Using a component rather than a page

components/quests/task.tsx

@@ -9,6 +9,7 @@ import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import Button from "../UI/button";
 import { CircularProgress } from "@mui/material";
 import { useAccount } from "@starknet-react/core";
+import Quiz from "../quizzes/quiz";
 
 const Task: FunctionComponent<Task> = ({
   name,
@@ -22,6 +23,7 @@ const Task: FunctionComponent<Task> = ({
   verifyEndpointType,
   hasError,
   verifyError,
+  setMenu,
 }) => {
   const [isClicked, setIsClicked] = useState(false);
   const [isVerified, setIsVerified] = useState(false);
@@ -96,6 +98,12 @@ const Task: FunctionComponent<Task> = ({
     setIsVerified(wasVerified);
   }, [wasVerified]);
 
+  const openTask = () => {
+    if (verifyEndpointType === "quiz")
+      return setMenu(<Quiz setMenu={setMenu} name={name} />);
+    window.open(href);
+  };
+
   return (
     <div className={styles.task}>
       <div
@@ -146,7 +154,7 @@ const Task: FunctionComponent<Task> = ({
         <p className="mb-3">{description}</p>
         <div className="flex w-full justify-center items-center">
           <div className="w-2/3">
-            <Button onClick={() => window.open(href)}>{cta}</Button>
+            <Button onClick={() => openTask()}>{cta}</Button>
           </div>
         </div>
       </div>

components/quests/quizzes/endScreen.tsx → components/quizzes/endScreen.tsx

@@ -1,19 +1,21 @@
-import React, { FunctionComponent } from "react";
+import React, { Dispatch, FunctionComponent, SetStateAction } from "react";
 import Menu from "./menu";
-import styles from "../../../styles/components/quests/quizzes.module.css";
-import Button from "../../UI/button";
+import styles from "../../styles/components/quests/quizzes.module.css";
+import Button from "../UI/button";
 
 type EndScreenProps = {
-  quit: () => void;
+  setStep: Dispatch<SetStateAction<number>>;
 };
 
-const EndScreen: FunctionComponent<EndScreenProps> = ({ quit }) => {
+const EndScreen: FunctionComponent<EndScreenProps> = ({ setStep }) => {
   return (
     <>
       <div className={styles.content}>
         <Menu
           title="Well done !"
-          actionBar={<Button onClick={quit}>Go back to the quest</Button>}
+          actionBar={
+            <Button onClick={() => setStep(-2)}>Go back to the quest</Button>
+          }
           highlightTitle={false}
         >
           <p>

components/quests/quizzes/homeScreen.tsx → components/quizzes/homeScreen.tsx

@@ -1,21 +1,24 @@
-import React, { FunctionComponent } from "react";
+import React, { Dispatch, FunctionComponent, SetStateAction } from "react";
 import QuizControls from "./quizControls";
 import Menu from "./menu";
-import styles from "../../../styles/components/quests/quizzes.module.css";
-import Button from "../../UI/button";
+import styles from "../../styles/components/quests/quizzes.module.css";
+import Button from "../UI/button";
 
 type HomeScreenProps = {
-  move: (direction?: number) => void;
-  quit: () => void;
+  setStep: Dispatch<SetStateAction<number>>;
 };
 
-const HomeScreen: FunctionComponent<HomeScreenProps> = ({ move, quit }) => {
+const HomeScreen: FunctionComponent<HomeScreenProps> = ({ setStep }) => {
   return (
     <>
       <div className={styles.content}>
         <Menu
           title="Uniswap Oracle"
-          actionBar={<Button onClick={() => move()}>Start Quiz</Button>}
+          actionBar={
+            <Button onClick={() => setStep((step) => step + 1)}>
+              Start Quiz
+            </Button>
+          }
         >
           <p>
             Welcome to the Uniswap Unraveled quiz – an exhilarating journey into
@@ -26,7 +29,7 @@ const HomeScreen: FunctionComponent<HomeScreenProps> = ({ move, quit }) => {
           </p>
         </Menu>
       </div>
-      <QuizControls move={move} quit={quit} />
+      <QuizControls setStep={setStep} />
     </>
   );
 };

components/quests/quizzes/menu.tsx → components/quizzes/menu.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, ReactNode } from "react";
-import styles from "../../../styles/components/quests/quizzes.module.css";
+import styles from "../../styles/components/quests/quizzes.module.css";
 
 type MenuProps = {
   title: string;

components/quests/quizzes/progressBar.tsx → components/quizzes/progressBar.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
-import styles from "../../../styles/components/quests/progressBar.module.css";
-import CheckMarkIcon from "../../UI/iconsComponents/icons/checkMarkIcon";
+import styles from "../../styles/components/quests/progressBar.module.css";
+import CheckMarkIcon from "../UI/iconsComponents/icons/checkMarkIcon";
 
 type ProgressBarProps = {
   currentStep: number;

components/quizzes/quiz.tsx

@@ -0,0 +1,36 @@
+import React from "next";
+import HomeScreen from "./homeScreen";
+import styles from "../../styles/components/quests/quizzes.module.css";
+import { FunctionComponent, ReactNode, useEffect, useState } from "react";
+import Step from "./step";
+import EndScreen from "./endScreen";
+
+type QuizProps = {
+  setMenu: (menu: ReactNode) => void;
+  name: string;
+};
+
+const Quiz: FunctionComponent<QuizProps> = ({ setMenu, name }) => {
+  const [step, setStep] = useState<number>(-1);
+
+  // TODO: Load data dynamically using quiz name
+  const steps: Array<QuizStep> = [{}, {}, {}, {}];
+
+  useEffect(() => {
+    if (step === -2) setMenu(null);
+  }, [step]);
+
+  return (
+    <div className={styles.mainContainer}>
+      {step === -1 ? (
+        <HomeScreen setStep={setStep} />
+      ) : step === steps.length ? (
+        <EndScreen setStep={setStep} />
+      ) : (
+        <Step setStep={setStep} step={step} steps={steps} />
+      )}
+    </div>
+  );
+};
+
+export default Quiz;

components/quests/quizzes/quizControls.tsx → components/quizzes/quizControls.tsx

@@ -1,15 +1,14 @@
-import React, { FunctionComponent } from "react";
-import styles from "../../../styles/components/quests/quizzes.module.css";
+import React, { Dispatch, FunctionComponent, SetStateAction } from "react";
+import styles from "../../styles/components/quests/quizzes.module.css";
 
 type QuizControlsProps = {
-  move: (direction?: number) => void;
-  quit: () => void;
+  setStep: Dispatch<SetStateAction<number>>;
 };
 
-const QuizControls: FunctionComponent<QuizControlsProps> = ({ move, quit }) => {
+const QuizControls: FunctionComponent<QuizControlsProps> = ({ setStep }) => {
   return (
     <div className={styles.controls}>
-      <button onClick={() => move(-1)}>
+      <button onClick={() => setStep((step) => step - 1)}>
         <svg
           fill="none"
           viewBox="0 0 24 24"
@@ -24,7 +23,7 @@ const QuizControls: FunctionComponent<QuizControlsProps> = ({ move, quit }) => {
         </svg>
         Back
       </button>
-      <button onClick={() => quit()}>Cancel</button>
+      <button onClick={() => setStep(-2)}>Cancel</button>
     </div>
   );
 };

components/quizzes/step.tsx

@@ -0,0 +1,24 @@
+import React, { Dispatch, FunctionComponent, SetStateAction } from "react";
+import QuizControls from "./quizControls";
+import styles from "../../styles/components/quests/quizzes.module.css";
+import ProgressBar from "./progressBar";
+
+type StepProps = {
+  setStep: Dispatch<SetStateAction<number>>;
+  step: number;
+  steps: Array<QuizStep>;
+};
+
+const Step: FunctionComponent<StepProps> = ({ setStep, step, steps }) => {
+  return (
+    <>
+      <ProgressBar currentStep={step} totalSteps={steps.length} />
+      <div className={styles.content}>
+        <button onClick={() => setStep((step) => step + 1)}>Ok</button>
+      </div>
+      <QuizControls setStep={setStep} />
+    </>
+  );
+};
+
+export default Step;