Created an exit button on quiz section

nepalingo-web/src/components/Flashcard.tsx

@@ -4,12 +4,15 @@ import {
   faThumbsUp,
   faEye,
   faThumbsDown,
+  faSignOutAlt,
 } from "@fortawesome/free-solid-svg-icons";
 import Card from "@/components/Card";
 import useDictionary from "@/hooks/useDictionary";
 import ReactGA from "react-ga4";
 import { useLanguage } from "@/hooks/Langauge";
 import { getNextWord } from "@/lib/getNextWord";
+import { useNavigate } from "react-router-dom";
+import ExitConfirmationModal from "@/components/header/ExitConfirmationModal";
 
 const Flashcard: React.FC = () => {
   const [viewType, setViewType] = useState(0);
@@ -20,6 +23,8 @@ const Flashcard: React.FC = () => {
     void,
     unknown
   > | null>(null);
+  const [showExitModal, setShowExitModal] = useState(false);
+  const navigate = useNavigate();
 
   const { data, isLoading, error } = useDictionary({
     language: selectedLanguage || "",
@@ -55,6 +60,18 @@ const Flashcard: React.FC = () => {
     }
   };
 
+  const handleExit = () => {
+    setShowExitModal(true);
+  };
+
+  const confirmExit = (confirm: boolean) => {
+    if (confirm) {
+      navigate("/");
+    } else {
+      setShowExitModal(false);
+    }
+  };
+
   if (isLoading) return <div>Loading...</div>;
   if (error?.response?.length) handleNextWord();
 
@@ -79,6 +96,7 @@ const Flashcard: React.FC = () => {
           <div>No data available</div>
         )}
 
+
         <div className="flex justify-center mt-4 space-x-2">
           <button
             disabled={isLoading}
@@ -134,8 +152,20 @@ const Flashcard: React.FC = () => {
           >
             <FontAwesomeIcon icon={faThumbsUp} size="lg" />
           </button>
+
+          <button
+            className="bg-white text-red-500 p-4 rounded-[16px] shadow-md hover:bg-red-500 hover:text-white flex items-center justify-center"
+            onClick={handleExit}
+            style={{ width: "50px", height: "50px" }}
+          >
+            <FontAwesomeIcon icon={faSignOutAlt} size="lg" />
+          </button>
         </div>
       </div>
+      <ExitConfirmationModal
+        show={showExitModal}
+        onConfirm={confirmExit}
+      />
     </div>
   );
 };

nepalingo-web/src/components/header/ExitConfirmationModal.tsx

@@ -1,35 +1,37 @@
-import React from "react"
-interface ExitConfrimationModalProps {
+import React from "react";
+
+interface ExitConfirmationModalProps {
     show: boolean;
     onConfirm: (confirm: boolean) => void;
 }
-const ExitConfrimationModal: React.FC<ExitConfrimationModalProps> = ({
+
+const ExitConfirmationModal: React.FC<ExitConfirmationModalProps> = ({
     show,
     onConfirm
 }) => {
     if (!show) return null;
 
-    function confirmExit(arg0: boolean): void {
-        throw new Error("Function not implemented.");
-    }
-
     return (
-        <div className="fixed inset-0 bg-black-600 bg-opacity-50 flex items-center justify-center">
-            <div className=" bg-red p-6 rounded shadow-lg text-center">
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+            <div className="bg-white p-4 rounded shadow-lg text-center">
                 <p className="mb-4">Are you sure you want to exit?</p>
-                <div className="flex justify-center space x-6">
-                    <button className="bg-red-600 text-white p-2 rounded hover:bg-red-700"
-                        onClick={() => confirmExit(true)}>
+                <div className="flex justify-center space-x-6">
+                    <button
+                        className="bg-white-600 text-black p-3 rounded hover:bg-red-700"
+                        onClick={() => onConfirm(true)}
+                    >
                         Yes
                     </button>
-                    <button className="bg-green-600 text-white p-2 rounded hover:bg-green-700"
-                        onClick={() => confirmExit(false)}>
+                    <button
+                        className="bg-white-600 text-black p-3 rounded hover:bg-green-700"
+                        onClick={() => onConfirm(false)}
+                    >
                         No
-
                     </button>
                 </div>
             </div>
         </div>
     );
 };
-export default ExitConfirmationModal;
+
+export default ExitConfirmationModal;