Ayobami
63 lines
2.1 KiB
React
63 lines
2.1 KiB
React
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>
|
|
);
|
|
}
|