implemented new modal

components/Modals/New.tsx

@@ -1,12 +1,40 @@
 import { Tab } from "@headlessui/react";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 import NewLink from "./Tabs.tsx/NewLink";
 import NewCollection from "./Tabs.tsx/NewCollection";
 
-export default function New() {
+type Props = {
+  index?: number;
+  modalId: string;
+  isOpen: boolean;
+  onClose: Function;
+};
+
+export default function New({ index, modalId, isOpen, onClose }: Props) {
+  const newModal = document.getElementById(modalId);
+  const [tabIndex, setTabIndex] = useState(index);
+
+  useEffect(() => {
+    setTabIndex(index);
+
+    newModal?.addEventListener("close", () => {
+      onClose();
+    });
+
+    return () => {
+      newModal?.addEventListener("close", () => {
+        onClose();
+      });
+    };
+  }, [isOpen]);
+
   return (
-    <dialog id="new-modal" className="modal backdrop-blur-sm overflow-y-auto">
+    <dialog
+      id={modalId}
+      className="modal backdrop-blur-sm overflow-y-auto"
+      open={isOpen}
+    >
       <Toaster
         position="top-center"
         reverseOrder={false}
@@ -22,7 +50,10 @@ export default function New() {
           </button>
         </form>
 
-        <Tab.Group>
+        <Tab.Group
+          onChange={(i: any) => setTabIndex(i)}
+          selectedIndex={tabIndex}
+        >
           <Tab.List className="tabs-boxed flex w-fit mr-auto justify-center gap-1 p-1">
             <Tab
               className={({ selected }) =>
@@ -42,6 +73,15 @@ export default function New() {
             >
               File
             </Tab> */}
+            {/* <Tab
+              className={({ selected }) =>
+                `${
+                  selected ? "btn-primary" : "btn-ghost"
+                } outline-none rounded-md btn btn-sm w-24`
+              }
+            >
+              Note
+            </Tab> */}
             <Tab
               className={({ selected }) =>
                 `${
@@ -54,11 +94,12 @@ export default function New() {
           </Tab.List>
           <Tab.Panels className="mt-5">
             <Tab.Panel>
-              <NewLink />
+              <NewLink isOpen={isOpen} modalId={modalId} />
             </Tab.Panel>
-            {/* <Tab.Panel>Content 2</Tab.Panel> */}
+            {/* <Tab.Panel>File</Tab.Panel> */}
+            {/* <Tab.Panel>Note</Tab.Panel> */}
             <Tab.Panel>
-              <NewCollection />
+              <NewCollection isOpen={isOpen} modalId={modalId} />
             </Tab.Panel>
           </Tab.Panels>
         </Tab.Group>