Import Tables and relationships from Postgres SQL code is implemented successfully

src/components/checkbox/database-checkbox.tsx

@@ -17,7 +17,6 @@ const DatabaseCheckbox: React.FC<DatabaseCheckboxProps> = ({ database }) => {
             className="database-checkbox"
             classNames={{
                 base: "flex min-w-[128px] min-h-[128px]  max-w-[128px] max-h-[128px]  hover:bg-default rounded-md relative",
-                
                 wrapper: "absolute top-2 left-2 " , 
                 label : "flex items-center justify-center  w-full h-full p-2 "
             }}
@@ -25,7 +24,6 @@ const DatabaseCheckbox: React.FC<DatabaseCheckboxProps> = ({ database }) => {
             <div className="min-w-full h-full flex items-center justify-center  ">
                 <Image
                     src={database.logo}
-                    
                     className="w-full"
                 />
             </div>

src/components/checkbox/option-checkbox.tsx

@@ -0,0 +1,46 @@
+import { ImportDatabaseMethod, ImportDatabaseOption } from "@/lib/database"
+import { Avatar, Checkbox, Chip } from "@heroui/react";
+
+
+
+
+
+
+interface OptionCheckboxProps {
+    value: string;
+    label: string ; 
+    icon?: React.ReactNode;
+    logo?: string
+
+}
+
+
+const OptionCheckbox: React.FC<OptionCheckboxProps> = ({ value, icon, logo ,  label }) => {
+
+    return (
+        <Checkbox
+            aria-label={value}
+            value={value}
+            size="sm" 
+            className="option-checkbox"
+            classNames={{
+                wrapper: "hidden",
+                label: "flex items-center justify-center w-full h-full"
+            }}
+        >
+            <Chip radius="sm" variant="bordered" color="default" className="option-span px-2 border-1 transition-all duration-300 border-divider"  
+                avatar={logo ? <Avatar src={logo} /> : undefined}
+                startContent={
+                    icon
+                }
+            >
+                <span className="text-sm text-font font-semibold">
+                    {label}
+                </span>
+            </Chip>
+        </Checkbox>
+    )
+}
+
+
+export default OptionCheckbox; 

src/components/menu/menu.tsx

@@ -1,7 +1,7 @@
 
 import { useTheme } from "next-themes";
 import DropdownMenu, { MenuDropdownProps } from "./menu-dropdown";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useModal } from "@/providers/modal-provider/modal-provider";
 import { Modals } from "@/providers/modal-provider/modal-contxet";
@@ -23,6 +23,10 @@ const Menu: React.FC<MenuProps> = ({ }) => {
 
     const { t } = useTranslation();
     const { open } = useModal();
+
+    useEffect(() => { 
+              open(Modals.IMPORT_DATABASE)
+    } , [])
     const menu: MenuDropdownProps[] = useMemo(() => [
         {
             title: t("menu.file"),
@@ -43,12 +47,9 @@ const Menu: React.FC<MenuProps> = ({ }) => {
                 {
                     title: t("menu.import"),
                     divide: true,
-                    children: [
-                        { title: t("menu.json") },
-                        { title: t("menu.dbml") },
-                        { title: t("menu.mysql") },
-                        { title: t("menu.postgresql") },
-                    ],
+                    clickHandler: () => {
+                        open(Modals.IMPORT_DATABASE)
+                    }
                 },
                 {
                     title: t("menu.export_sql"),

src/components/modal/modal.tsx

@@ -14,7 +14,7 @@ import { useTranslation } from "react-i18next";
 
 export interface ModalProps {
     isOpen?: boolean,
-    onOpenChange: (open: boolean) => void,
+    onOpenChange? : (open: boolean) => void,
     className?: string,
     backdrop?: "blur" | "transparent" | "opaque",
     title: string,
@@ -45,7 +45,7 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onOpenChange, className, backdrop
         <HeroUiModal
             ref={targetRef}
             isOpen={isOpen}
-            onOpenChange={onOpenChange}
+            onOpenChange={onOpenChange ? onOpenChange : undefined}
             className={className}
             backdrop={backdrop}
             radius="sm"