Added abandon popup

src/components/AbandonPopup.tsx

@@ -0,0 +1,62 @@
+import {Dialog, Transition} from "@headlessui/react";
+import {Fragment} from "react";
+import Button from "./Low/Button";
+
+interface Props {
+    isOpen: boolean;
+	abandonPopupTitle: string;
+	abandonPopupDescription: string;
+	abandonConfirmButtonText: string;
+	onAbandon: Function;
+    onCancel: Function;
+}
+
+export default function AbandonPopup({
+    isOpen,
+    abandonPopupTitle,
+	abandonPopupDescription,
+	abandonConfirmButtonText,
+	onAbandon,
+    onCancel,
+}: Props) {
+        return (
+            <Transition show={isOpen} as={Fragment}>
+                <Dialog onClose={onCancel} className="relative z-50">
+                    <Transition.Child
+                        as={Fragment}
+                        enter="ease-out duration-300"
+                        enterFrom="opacity-0"
+                        enterTo="opacity-100"
+                        leave="ease-in duration-200"
+                        leaveFrom="opacity-100"
+                        leaveTo="opacity-0">
+                        <div className="fixed inset-0 bg-black/30" />
+                    </Transition.Child>
+    
+                    <Transition.Child
+                        as={Fragment}
+                        enter="ease-out duration-300"
+                        enterFrom="opacity-0 scale-95"
+                        enterTo="opacity-100 scale-100"
+                        leave="ease-in duration-200"
+                        leaveFrom="opacity-100 scale-100"
+                        leaveTo="opacity-0 scale-95">
+                        <div className="fixed inset-0 flex items-center justify-center p-4">
+                            <Dialog.Panel className="w-full max-w-2xl h-fit p-8 rounded-xl bg-white flex flex-col gap-4">
+                                <Dialog.Title className="font-bold text-xl">{abandonPopupTitle}</Dialog.Title>
+                                <span>{abandonPopupDescription}</span>
+                                <div className="w-full flex justify-between mt-8">
+                                    <Button color="purple" onClick={onCancel} variant="outline" className="max-w-[200px] self-end w-full">
+                                        Cancel
+                                    </Button>
+                                    <Button color="purple" onClick={onAbandon} className="max-w-[200px] self-end w-full">
+                                        {abandonConfirmButtonText}
+                                    </Button>
+                                </div>
+                            </Dialog.Panel>
+                        </div>
+                    </Transition.Child>
+                </Dialog>
+            </Transition>
+    );
+}

src/components/FocusLayer.tsx

@@ -1,3 +1,13 @@
-export default function FocusLayer() {
+import {useEffect, useState} from "react";
-	return <div className="bg-gray-700 bg-opacity-30 absolute top-0 left-0 bottom-0 right-0" />
+
+interface Props {
+	onFocusLayerMouseEnter: Function,
+}
+
+export default function FocusLayer({
+	onFocusLayerMouseEnter,
+}: Props) {
+	return (
+		<div className="bg-gray-700 bg-opacity-30 absolute top-0 left-0 bottom-0 right-0" onMouseEnter={onFocusLayerMouseEnter}/>
+	);
 }

src/components/High/Layout.tsx

@@ -10,16 +10,17 @@ interface Props {
 	className?: string;
 	navDisabled?: boolean;
 	focusMode?: boolean
+	onFocusLayerMouseEnter?: Function;
 }
 
-export default function Layout({user, children, className, navDisabled = false, focusMode = false}: Props) {
+export default function Layout({user, children, className, navDisabled = false, focusMode = false, onFocusLayerMouseEnter }: Props) {
 	const router = useRouter();
 
 	return (
 		<main className="w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke">
-			<Navbar user={user} navDisabled={navDisabled} focusMode={focusMode} />
+			<Navbar user={user} navDisabled={navDisabled} focusMode={focusMode} onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
 			<div className="h-full w-full flex gap-2">
-				<Sidebar path={router.pathname} navDisabled={navDisabled} focusMode={focusMode} />
+				<Sidebar path={router.pathname} navDisabled={navDisabled} focusMode={focusMode} onFocusLayerMouseEnter={onFocusLayerMouseEnter}/>
 				<div
 					className={clsx(
 						"w-5/6 min-h-full h-fit mr-8 bg-white shadow-md rounded-2xl p-12 pb-8 flex flex-col gap-12 relative overflow-hidden mt-2",

src/components/Navbar.tsx

@@ -9,10 +9,11 @@ interface Props {
 	user: User;
 	navDisabled?: boolean;
 	focusMode?: boolean;
+	onFocusLayerMouseEnter?: Function;
 }
 
 /* eslint-disable @next/next/no-img-element */
-export default function Navbar({user, navDisabled = false, focusMode = false}: Props) {
+export default function Navbar({user, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
 	const disableNavigation = preventNavigation(navDisabled, focusMode);
 
 	return (
@@ -25,7 +26,7 @@ export default function Navbar({user, navDisabled = false, focusMode = false}: P
 					<span className="text-right">{user.name}</span>
 				</Link>
 			</div>
-			{focusMode && <FocusLayer/>}
+			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter}/>}
 		</header>
 	);
 }

src/components/Sidebar.tsx

@@ -14,6 +14,7 @@ interface Props {
 	path: string;
 	navDisabled?: boolean;
 	focusMode?: boolean;
+	onFocusLayerMouseEnter?: Function;
 }
 
 interface NavProps {
@@ -36,7 +37,7 @@ const Nav = ({Icon, label, path, keyPath, disabled = false}: NavProps) => (
 	</Link>
 );
 
-export default function Sidebar({path, navDisabled = false, focusMode = false }: Props) {
+export default function Sidebar({path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
 	const router = useRouter();
 
 	const logout = async () => {
@@ -68,7 +69,7 @@ export default function Sidebar({path, navDisabled = false, focusMode = false }:
 				<RiLogoutBoxFill size={20} />
 				<span className="text-lg font-medium">Log Out</span>
 			</div>
-			{focusMode && <FocusLayer />}
+			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
 		</section>
 	);
 }

src/pages/exam.tsx

@@ -30,6 +30,7 @@ import useUser from "@/hooks/useUser";
 import useExamStore from "@/stores/examStore";
 import Layout from "@/components/High/Layout";
 import {speakingReverseMarking, writingReverseMarking} from "@/utils/score";
+import AbandonPopup from "@/components/AbandonPopup";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -61,6 +62,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 setHasExamEnded = useExamStore((state) => state.setHasExamEnded);
 
 	const {user} = useUser({redirectTo: "/login"});
@@ -315,8 +317,26 @@ export default function Page() {
 			</Head>
 			<ToastContainer />
 			{user && (
-				<Layout user={user} className="justify-between" focusMode={selectedModules.length !== 0}>
+				<Layout
+					user={user}
+					className="justify-between"
+					focusMode={selectedModules.length !== 0}
+					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
+					>
+						<>
 						{renderScreen()}
+						<AbandonPopup
+							isOpen={showAbandonPopup}
+							abandonPopupTitle="Leave Exam"
+							abandonPopupDescription="Are you sure you want to leave the exam? You will lose all your progress."
+							abandonConfirmButtonText="Confirm"
+							onAbandon={() => {
+								console.log('TODO: Handle Abandon');
+								return true;
+							}}
+							onCancel={() => setShowAbandonPopup(false)}
+						/>
+						</>
 				</Layout>
 			)}
 		</>

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}>
+				<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>
 			)}
 		</>