Added abandon popup

src/pages/exercises.tsx

@@ -33,6 +33,7 @@ import Sidebar from "@/components/Sidebar";
 import Layout from "@/components/High/Layout";
 import {sortByModule} from "@/utils/moduleUtils";
 import {speakingReverseMarking, writingReverseMarking} from "@/utils/score";
+import AbandonPopup from "@/components/AbandonPopup";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -64,6 +65,7 @@ export default function Page() {
 	const [userSolutions, setUserSolutions] = useExamStore((state) => [state.userSolutions, state.setUserSolutions]);
 	const [showSolutions, setShowSolutions] = useExamStore((state) => [state.showSolutions, state.setShowSolutions]);
 	const [selectedModules, setSelectedModules] = useExamStore((state) => [state.selectedModules, state.setSelectedModules]);
+	const [showAbandonPopup, setShowAbandonPopup] = useState(false);
 
 	const {user} = useUser({redirectTo: "/login"});
 
@@ -317,8 +319,27 @@ export default function Page() {
 			</Head>
 			<ToastContainer />
 			{user && (
-				<Layout user={user} className="justify-between" focusMode={selectedModules.length !== 0}>
-					{renderScreen()}
+				<Layout
+					user={user}
+					className="justify-between"
+					focusMode={selectedModules.length !== 0}
+					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
+				>
+					<>
+						{renderScreen()}
+							<AbandonPopup
+								isOpen={showAbandonPopup}
+
+								abandonPopupTitle="Leave Exercise"
+								abandonPopupDescription="Are you sure you want to leave the exercise? You will lose all your progress."
+								abandonConfirmButtonText="Confirm"
+								onAbandon={() => {
+									console.log('TODO: Handle Abandon');
+									return true;
+								}}
+								onCancel={() => setShowAbandonPopup(false)}
+							/>
+						</>
 				</Layout>
 			)}
 		</>