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