153 lines
5.1 KiB
TypeScript
153 lines
5.1 KiB
TypeScript
'use client';
|
|
import React, { Fragment } from 'react';
|
|
import { Dialog, Transition, TransitionChild, DialogPanel } from '@headlessui/react';
|
|
import IconX from '@/components/icon/icon-x';
|
|
|
|
interface EditProfileModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
params: any;
|
|
onChange: (e: any) => void;
|
|
onSave: () => void;
|
|
}
|
|
|
|
const EditProfileModal: React.FC<EditProfileModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
params,
|
|
onChange,
|
|
onSave,
|
|
}) => {
|
|
return (
|
|
<Transition appear show={isOpen} as={Fragment}>
|
|
<Dialog as="div" open={isOpen} onClose={onClose} className="relative z-50">
|
|
<TransitionChild
|
|
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]/60" />
|
|
</TransitionChild>
|
|
|
|
<div className="fixed inset-0 overflow-y-auto">
|
|
<div className="flex min-h-full items-center justify-center px-4 py-8">
|
|
<TransitionChild
|
|
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"
|
|
>
|
|
<DialogPanel className="panel w-full max-w-lg overflow-hidden rounded-lg border-0 p-0 text-black dark:text-white-dark">
|
|
{/* Close Button */}
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="absolute top-4 text-gray-400 hover:text-gray-800 ltr:right-4 rtl:left-4"
|
|
>
|
|
<IconX />
|
|
</button>
|
|
|
|
{/* Header */}
|
|
<div className="bg-[#00d1ff] py-3 text-lg font-medium ltr:pl-5 rtl:pr-5 dark:bg-[#121c2c]">
|
|
Update Profile
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<div className="p-5">
|
|
<form noValidate>
|
|
<div className="mb-4">
|
|
<label>Name</label>
|
|
<input
|
|
id="name"
|
|
type="text"
|
|
className="form-input"
|
|
value={params.name}
|
|
onChange={onChange}
|
|
placeholder="Enter full name"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<label>Email</label>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
className="form-input"
|
|
value={params.email}
|
|
onChange={onChange}
|
|
placeholder="Enter email"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<label>Phone Number</label>
|
|
<input
|
|
id="phonenumber"
|
|
type="text"
|
|
className="form-input"
|
|
value={params.phonenumber}
|
|
onChange={onChange}
|
|
placeholder="Enter phone number"
|
|
/>
|
|
</div>
|
|
|
|
{/* <div className="mb-4">
|
|
<label>Company Name</label>
|
|
<input
|
|
id="companyname"
|
|
type="text"
|
|
className="form-input"
|
|
value={params.companyname}
|
|
onChange={onChange}
|
|
placeholder="Enter company name"
|
|
/>
|
|
</div> */}
|
|
|
|
{/* ✅ Role Display (Read-only) */}
|
|
{/* <div className="mb-4">
|
|
<label>Role</label>
|
|
<input
|
|
id="role"
|
|
type="hidden"
|
|
className="form-input bg-gray-100 cursor-not-allowed text-gray-700"
|
|
value={params.role}
|
|
readOnly
|
|
/>
|
|
</div> */}
|
|
|
|
<div className="mt-6 flex justify-end">
|
|
<button
|
|
type="button"
|
|
className="btn btn-outline-danger"
|
|
onClick={onClose}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary ltr:ml-4 rtl:mr-4"
|
|
onClick={onSave}
|
|
>
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</DialogPanel>
|
|
</TransitionChild>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</Transition>
|
|
);
|
|
};
|
|
|
|
export default EditProfileModal;
|