ISSUE 6: add confirmation modal before profile pic removal and preview modal on upload

2025-07-01 16:59:55 +01:00
parent 5046be7584
commit 201d9decb3
4 changed files with 314 additions and 109 deletions
@@ -0,0 +1,62 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment } from "react";
+
+export default function ProfileImageConfirmModal({
+  modalOpen,
+  modalImage,
+  onConfirm,
+  onCancel,
+}) {
+  return (
+    <Transition appear show={modalOpen} as={Fragment}>
+      <Dialog as='div' className='relative z-10' onClose={onCancel}>
+        <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 bg-opacity-25' />
+        </Transition.Child>
+        <div className='fixed inset-0 overflow-y-auto'>
+          <div className='flex min-h-full items-center justify-center p-4 text-center'>
+            <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'
+            >
+              <Dialog.Panel className='w-full max-w-sm transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
+                <img
+                  src={modalImage || "/default.png"}
+                  alt='Profile Preview'
+                  className='mb-4 h-64 w-full rounded object-cover'
+                />
+                <div className='flex justify-center gap-4'>
+                  <button
+                    className='login-btn-gradient rounded px-4 py-2 text-white'
+                    onClick={onConfirm}
+                  >
+                    Confirm
+                  </button>
+                  <button
+                    className='rounded bg-gray-300 px-4 py-2 text-black'
+                    onClick={onCancel}
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+}