package image

Test produxt

Test productuuss

৳ 90৳ 100

Usage Example


import Modal from "./Modal";
import { useState } from "react";

export default function Demo() {
const [openModal, setOpenModal] = useState(false);

return (
<div className="p-10">
<button
onClick={() => setOpenModal(true)}
className="px-4 py-2 bg-blue-500 text-white rounded"
>
Open Modal
</button>

{openModal && (
<Modal title="Edit Profile">
<form className="space-y-4">
<input
type="text"
placeholder="Name"
className="w-full border px-3 py-2 rounded"
/>
<input
type="email"
placeholder="Email"
className="w-full border px-3 py-2 rounded"
/>
<button
type="submit"
className="px-4 py-2 bg-green-500 text-white rounded"
>
Save
</button>
</form>
</Modal>
)}
</div>
);
}

✅ Features implemented:

  1. Reusable modal → just pass title and children
  2. Internal open/close state → can also control externally if needed
  3. Body scroll disabled when modal is open
  4. Click outside closes modal
  5. Auto-scroll inside modal when content overflows
  6. Preserves shadow, rounded corners, responsive width