feat: adj component

app/components/popup/modal.tsx

@@ -1,6 +1,7 @@
+import { Dialog, DialogPanel } from '@headlessui/react'
 import type { ReactNode } from 'react'
 
-interface ModalProperties {
+type ModalProperties = {
   isOpen: boolean
   onClose: () => void
   children: ReactNode
@@ -13,18 +14,22 @@ export default function PopupModal({
 }: ModalProperties) {
   if (!isOpen) return
   return (
-    <>
-      <div className="bg-opacity-50 fixed inset-0 z-50 grid place-items-center bg-gray-300/50">
-        <button
-          onClick={onClose}
-          className="absolute top-5 right-5 z-50 bg-red-500 p-3 text-gray-500 hover:text-gray-800"
-        >
-          ✖
-        </button>
-        <div className="relative rounded-lg bg-white p-6 shadow-lg">
-          {children}
+    <Dialog
+      open={isOpen}
+      as="div"
+      className="relative z-30 focus:outline-none"
+      onClose={onClose}
+    >
+      <div className="fixed inset-0 z-30 w-screen overflow-y-auto backdrop-blur-sm">
+        <div className="flex min-h-full items-center justify-center sm:p-4">
+          <DialogPanel
+            transition
+            className="w-full rounded-xl bg-white p-5 shadow duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0 max-md:min-h-screen max-md:min-w-screen max-sm:p-[50px] sm:max-w-md sm:p-10"
+          >
+            {children}
+          </DialogPanel>
         </div>
       </div>
-    </>
+    </Dialog>
   )
 }