feat: implement unified delete dialog component and update related pages

2025-03-13 09:26:33 +08:00
parent 2c703de8e5
commit b00adf89ec
10 changed files with 72 additions and 221 deletions
@@ -0,0 +1,68 @@
+import {
+  Description,
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/react'
+import type { ReactNode } from 'react'
+
+import { LeftArrow } from '~/components/icons/left-arrow'
+import { APP } from '~/configs/meta'
+
+type ModalProperties = {
+  isOpen: boolean
+  onClose: () => void
+  children: ReactNode
+  description?: string
+}
+
+export const DialogNews = ({
+  isOpen,
+  onClose,
+  children,
+  description,
+}: ModalProperties) => {
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={onClose}
+      className="relative z-50"
+      transition
+    >
+      <DialogBackdrop
+        className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
+        transition
+      />
+      <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
+        <DialogPanel
+          transition
+          className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
+        >
+          <DialogTitle className="relative flex justify-center">
+            <button
+              onClick={onClose}
+              className="absolute top-0 left-0 items-center sm:hidden"
+            >
+              <LeftArrow
+                width={50}
+                height={50}
+              />
+            </button>
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[80px]"
+            />
+          </DialogTitle>
+          {description && (
+            <Description className="text-center text-[#565658]">
+              {description}
+            </Description>
+          )}
+          <div className="relative">{children}</div>
+        </DialogPanel>
+      </div>
+    </Dialog>
+  )
+}