Merge branch 'main' into PRWLR-4123-Providers-Page-Table

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
+        modalTitle="Modal Title"
+        modalBody={
+          <>
+            <p>Modal body content</p>
+          </>
+        }
+        actionButtonLabel="Save"
+        onAction={onSave}
+        openButtonLabel="Open Modal"
+      />
     </>
   );
 }

components/Navbar.tsx

@@ -1,60 +0,0 @@
-"use client";
-
-import {
-  Link,
-  Navbar as NextUINavbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  NavbarMenu,
-  NavbarMenuItem,
-  NavbarMenuToggle,
-} from "@nextui-org/react";
-import React from "react";
-
-export const Navbar = () => {
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-
-  const menuItems = ["Test Link", "Log Out"];
-
-  return (
-    <NextUINavbar onMenuOpenChange={setIsMenuOpen}>
-      <NavbarContent>
-        <NavbarMenuToggle
-          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
-        />
-        <NavbarBrand>
-          <p className="font-bold text-inherit">PROWLER</p>
-        </NavbarBrand>
-      </NavbarContent>
-
-      <NavbarContent className="hidden sm:flex gap-4" justify="center">
-        <NavbarItem>
-          <Link color="foreground" href="/">
-            Login
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link color="foreground" href="/clouds">
-            Cloud Accounts
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link color="foreground" href="/about">
-            About
-          </Link>
-        </NavbarItem>
-      </NavbarContent>
-
-      <NavbarMenu>
-        {menuItems.map((item, index) => (
-          <NavbarMenuItem key={`${item}-${index}`}>
-            <Link color="foreground" className="w-full" href="#" size="lg">
-              {item}
-            </Link>
-          </NavbarMenuItem>
-        ))}
-      </NavbarMenu>
-    </NextUINavbar>
-  );
-};

components/index.ts

@@ -2,5 +2,6 @@ export * from "./providers/AccountInfo";
 export * from "./providers/DateWithTime";
 export * from "./providers/ScanStatus";
 export * from "./ui/header/Header";
+export * from "./ui/modal";
 export * from "./ui/sidebar";
 export * from "./ui/table/CustomTable";

components/ui/modal/Modal.tsx

@@ -0,0 +1,65 @@
+import {
+  Button,
+  Modal as ModalContainer,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from "@nextui-org/react";
+import React from "react";
+
+interface ModalProps {
+  modalTitle: string;
+  modalBody: React.ReactNode;
+  closeButtonLabel?: string;
+  actionButtonLabel?: string;
+  onAction: () => void;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  isDismissable?: boolean;
+  isKeyboardDismissDisabled?: boolean;
+  hideCloseButton?: boolean;
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  modalTitle,
+  modalBody,
+  closeButtonLabel,
+  actionButtonLabel,
+  onAction,
+  isOpen,
+  onOpenChange,
+  isDismissable,
+}) => {
+  return (
+    <>
+      <ModalContainer
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        backdrop="blur"
+        isDismissable={isDismissable}
+        isKeyboardDismissDisabled={!isDismissable}
+        hideCloseButton={!isDismissable}
+      >
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">
+                {modalTitle}
+              </ModalHeader>
+              <ModalBody>{modalBody}</ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  {closeButtonLabel}
+                </Button>
+                <Button color="primary" onPress={onAction}>
+                  {actionButtonLabel}
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </ModalContainer>
+    </>
+  );
+};

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 {
+  modalTitle: string;
+  modalBody: React.ReactNode;
+  closeButtonLabel?: string;
+  actionButtonLabel?: string;
+  onAction: () => void;
+  openButtonLabel?: string;
+  isDismissable?: boolean;
+}
+
+export const ModalWrap: React.FC<ModalWrapProps> = ({
+  modalTitle,
+  modalBody,
+  closeButtonLabel = "Close",
+  actionButtonLabel = "Save",
+  onAction,
+  openButtonLabel = "Open",
+  isDismissable = true,
+}) => {
+  const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
+  const closeOnAction = () => {
+    onAction?.();
+    onClose();
+  };
+
+  return (
+    <>
+      <Button onPress={onOpen}>{openButtonLabel}</Button>
+      <Modal
+        modalTitle={modalTitle}
+        modalBody={modalBody}
+        closeButtonLabel={closeButtonLabel}
+        actionButtonLabel={actionButtonLabel}
+        onAction={closeOnAction}
+        isDismissable={isDismissable}
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+      />
+    </>
+  );
+};

components/ui/modal/index.ts

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

package.json

@@ -1,6 +1,5 @@
 {
   "dependencies": {
-    "@heroicons/react": "^2.1.4",
     "@nextui-org/react": "^2.4.2",
     "@nextui-org/system": "2.2.1",
     "@nextui-org/theme": "2.2.5",