From bb3336f657dc7c793282098ff93744da5a271fa8 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Tue, 25 Jul 2023 21:42:46 +0100
Subject: [PATCH] feat: confirm button on post settings modal

---
 .../[subdomain]/editor/page-component.tsx         |  3 +++
 .../dashboard/DeleteConfirmationModal.tsx         |  2 +-
 src/components/ui/Modal.tsx                       | 15 +++++++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/app/dashboard/[subdomain]/editor/page-component.tsx b/src/app/dashboard/[subdomain]/editor/page-component.tsx
index da4fb154..6bcf6ad8 100644
--- a/src/app/dashboard/[subdomain]/editor/page-component.tsx
+++ b/src/app/dashboard/[subdomain]/editor/page-component.tsx
@@ -901,6 +901,9 @@ const useEditorAdvancedModal = ({ isPost }: { isPost: boolean }) => {
     present({
       title: t("Advanced Settings"),
       content: () => <EditorAdvancedModal isPost={isPost} />,
+      modalProps: {
+        withConfirm: true,
+      },
     })
   }
 }
diff --git a/src/components/dashboard/DeleteConfirmationModal.tsx b/src/components/dashboard/DeleteConfirmationModal.tsx
index b3b13de2..4ac34339 100644
--- a/src/components/dashboard/DeleteConfirmationModal.tsx
+++ b/src/components/dashboard/DeleteConfirmationModal.tsx
@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next"
+import { useTranslation } from "~/lib/i18n/client"
 
 import { Button } from "../ui/Button"
 import { Modal } from "../ui/Modal"
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 5cb21962..141b6ddd 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -4,8 +4,11 @@ import React, { Fragment, forwardRef } from "react"
 
 import { Dialog, Transition } from "@headlessui/react"
 
+import { useTranslation } from "~/lib/i18n/client"
 import { cn } from "~/lib/utils"
 
+import { Button } from "./Button"
+
 export interface ModalProps {
   open: boolean
   setOpen: (open: boolean) => void
@@ -17,6 +20,7 @@ export interface ModalProps {
   panelClassName?: string
   boxClassName?: string
   afterLeave?: () => void
+  withConfirm?: boolean
 }
 
 export const Modal = forwardRef<HTMLDivElement, ModalProps>(
@@ -32,9 +36,12 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
       panelClassName,
       boxClassName,
       afterLeave,
+      withConfirm,
     },
     ref,
   ) => {
+    const { t } = useTranslation("common")
+
     return (
       <Transition appear show={open} as={Fragment} afterLeave={afterLeave}>
         <Dialog
@@ -102,6 +109,14 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
                   </Dialog.Title>
                 )}
                 {children}
+                {withConfirm && (
+                  <Button
+                    className="mb-5 mx-auto"
+                    onClick={() => setOpen(false)}
+                  >
+                    {t("Confirm")}
+                  </Button>
+                )}
               </Dialog.Panel>
             </Transition.Child>
           </div>