feat(modal): Use server to pass event handler

app/(prowler)/providers/page.tsx

@@ -1,7 +1,7 @@
 import { Spacer } from "@nextui-org/react";
 import React from "react";
 
-import { CustomTable, Header } from "@/components";
+import { CustomTable, Header, ModalWrap } from "@/components";
 
 const visibleColumns: string[] = [
   "account",
@@ -15,6 +15,11 @@ const visibleColumns: string[] = [
 ];
 
 export default function Providers() {
+  const onSave = async () => {
+    "use server";
+    // event we want to pass down, ex. console.log("### hello");
+  };
+
   return (
     <>
       <Header title="Providers" icon="fluent:cloud-sync-24-regular" />
@@ -25,6 +30,17 @@ export default function Providers() {
         selectionMode={"none"}
       />
       <Spacer />
+      <ModalWrap
+        title="Modal Title"
+        body={
+          <>
+            <p>Modal body content</p>
+          </>
+        }
+        actionText="Save"
+        onAction={onSave}
+        triggerText="Open Modal"
+      />
     </>
   );
 }

components/index.ts

@@ -1,4 +1,4 @@
 export * from "./ui/header/Header";
-export * from "./ui/modal/Modal";
+export * from "./ui/modal";
 export * from "./ui/sidebar";
 export * from "./ui/table/CustomTable";

components/ui/modal/Modal.tsx

@@ -10,12 +10,12 @@ import React from "react";
 
 interface ModalProps {
   title: string;
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
   body: React.ReactNode;
-  onCloseText?: string;
+  closeText?: string;
   actionText?: string;
   onAction?: () => void;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
   isDismissable?: boolean;
 }
 
@@ -24,10 +24,10 @@ export const Modal: React.FC<ModalProps> = ({
   isOpen,
   onOpenChange,
   body,
-  onCloseText = "Close",
-  actionText = "Save",
+  closeText,
+  actionText,
   onAction,
-  isDismissable = true,
+  isDismissable,
 }) => {
   const hasActionButton = actionText && onAction;
 
@@ -48,7 +48,7 @@ export const Modal: React.FC<ModalProps> = ({
               <ModalBody>{body}</ModalBody>
               <ModalFooter>
                 <Button color="danger" variant="light" onPress={onClose}>
-                  {onCloseText && onCloseText}
+                  {closeText && closeText}
                 </Button>
                 {hasActionButton && (
                   <Button color="primary" onPress={onAction}>

components/ui/modal/ModalWrap.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Button, useDisclosure } from "@nextui-org/react";
+import React from "react";
+
+import { Modal } from "@/components";
+
+interface ModalWrapProps {
+  title: string;
+  body: React.ReactNode;
+  closeText?: string;
+  actionText?: string;
+  onAction?: () => void;
+  triggerText?: string;
+  isDismissable?: boolean;
+}
+
+export const ModalWrap: React.FC<ModalWrapProps> = ({
+  title,
+  body,
+  closeText = "Close",
+  actionText = "Save",
+  onAction,
+  isDismissable = true,
+  triggerText = "Open",
+}) => {
+  const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
+  const closeOnAction = () => {
+    onAction && onAction();
+    onClose();
+  };
+
+  return (
+    <>
+      <Button onPress={onOpen}>{triggerText}</Button>
+      <Modal
+        title={title}
+        body={body}
+        closeText={closeText}
+        actionText={actionText}
+        onAction={closeOnAction}
+        isDismissable={isDismissable}
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+      />
+    </>
+  );
+};

components/ui/modal/index.ts

@@ -0,0 +1,2 @@
+export * from "./Modal";
+export * from "./ModalWrap";