ayobami/Ergo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ayobami
2025-07-01 16:59:55 +01:00
parent 5046be7584
commit 201d9decb3
4 changed files with 314 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ConfirmationModal.jsx
+33 -16
View File
@@ -9,28 +9,45 @@ export default function ConfirmationModal() {
if (!state.confirmation) return null;
return (
<div className={"popup-container z-100 flex items-center justify-center normal-case"}>
<div
className={
"popup-container z-100 flex items-center justify-center normal-case"
}
>
<div
className={`${state.confirmation ? "pop-in" : "pop-out"} w-[510px] max-w-[80%] rounded-lg bg-white p-5 px-3 md:px-5`}
className={`${
state.confirmation ? "pop-in" : "pop-out"
} w-[510px] max-w-[80%] rounded-lg bg-white p-5 px-3 md:px-5`}
onClick={(e) => e.stopPropagation()}
>
<h2 className="mb-4 text-3xl font-semibold">
<h2 className='mb-4 text-3xl font-semibold'>
<GreenCheckIcon />
{state.confirmationHeading}
</h2>
<p className="mb-4 text-sm text-gray-500">{state.confirmationMsg}</p>
<button
type="button"
className="login-btn-gradient mt-4 w-full rounded py-2 tracking-wide text-white outline-none focus:outline-none"
onClick={() => {
if (state.confirmationCloseFn) {
state.confirmationCloseFn();
}
dispatch({ type: "CLOSE_CONFIRMATION" });
}}
>
{state.confirmationBtn}
</button>
<p className='mb-4 text-sm text-gray-500'>{state.confirmationMsg}</p>
<div className='flex gap-4 *:w-1/2'>
<button
type='button'
onClick={() => {
dispatch({ type: "CLOSE_CONFIRMATION" });
}}
className='mt-4 w-full rounded border-2 border-gray-300 py-2 tracking-wide text-black outline-none focus:outline-none'
>
Cancel
</button>
<button
type='button'
className='login-btn-gradient mt-4 w-full rounded py-2 tracking-wide text-white outline-none focus:outline-none'
onClick={() => {
if (state.confirmationCloseFn) {
state.confirmationCloseFn();
}
dispatch({ type: "CLOSE_CONFIRMATION" });
}}
>
{state.confirmationBtn}
</button>
</div>
</div>
</div>
);
src/components/Profile/ProfileImageConfirmModal.jsx
+62
View File
@@ -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>
);
}