feat(modal): Add in modal component v1

app/(prowler)/providers/page.tsx

@@ -1,13 +1,35 @@
+"use client";
+
+import { Button, useDisclosure } from "@nextui-org/react";
 import React from "react";
 
-import { Header } from "@/components";
+import { Header, Modal } from "@/components";
 
 export default function Providers() {
+  const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
+
+  const onAction = () => {
+    onClose();
+  };
+
   return (
     <>
       <Header title="Providers" icon="tabler:zoom-scan" />
 
       <p>Hi hi from Providers page</p>
+      <Button onPress={onOpen}>Open Modal</Button>
+      <Modal
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        title="Overview Modal"
+        body={
+          <>
+            <p>Modal body content</p>
+          </>
+        }
+        actionText="Save"
+        onAction={onAction}
+      />
     </>
   );
 }

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

@@ -1,2 +1,3 @@
 export * from "./ui/header/Header";
+export * from "./ui/modal/Modal";
 export * from "./ui/sidebar";

components/ui/modal/Modal.tsx

@@ -0,0 +1,54 @@
+import {
+  Button,
+  Modal as ModalContainer,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from "@nextui-org/react";
+import React from "react";
+
+interface ModalProps {
+  title: string;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  body: React.ReactNode;
+  actionText?: string;
+  onAction?: () => void;
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  title,
+  isOpen,
+  onOpenChange,
+  body,
+  actionText,
+  onAction,
+}) => {
+  const hasActionButton = actionText && onAction;
+
+  return (
+    <>
+      <ModalContainer isOpen={isOpen} onOpenChange={onOpenChange}>
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">{title}</ModalHeader>
+              <ModalBody>{body}</ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                {hasActionButton && (
+                  <Button color="primary" onPress={onAction}>
+                    {actionText}
+                  </Button>
+                )}
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </ModalContainer>
+    </>
+  );
+};

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",