bug on reactflow render, now tabs kind of work, but is not perfect yet, does not have the save function yet

space_flow/src/pages/FlowPage/flowManager/index.tsx

@@ -16,9 +16,19 @@ export function TabsManager(){
   
   return(
     <div className="h-full w-full flex flex-col">
-      <div className="w-full flex pr-2 flex-row gap-2">
+      <div className="w-full flex pr-2 flex-row text-center items-center">
         {flows.map((flow,index)=>{
-          return(<TabComponent key={index}>{flow.name}</TabComponent>)
+          return(<TabComponent selected={index===tabIndex} key={index}><div onClick={()=>setTabIndex(index)}>{flow.name}</div></TabComponent>)
+        })}
+      </div>
+      <div className='w-full h-full'>
+        {flows.map((flow,index)=>{
+          return(
+            <div key={index} className={'w-full h-full'} style={{display:index!==tabIndex?"none":""}}>
+              
+                <FlowPage></FlowPage>
+            </div>
+          )
         })}
       </div>
     </div>

space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx

@@ -1,12 +1,16 @@
+import { XMarkIcon } from "@heroicons/react/24/solid";
+import { classNames } from "../../../../utils";
+
 type tabProps = {
     name:string;
 }
 
 
-export default function TabComponent({children}){
+export default function TabComponent({children,selected}){
     return(
-        <div className="bg-blue-400 w-2">
+        <div className={classNames(selected?" shadow-lg":"bg-gray-300","flex border-t border-l border-r border-black rounded-t-md shadow-sm cursor-pointer")}>
             {children}
+            <XMarkIcon className="w-5 hover:text-red-500"></XMarkIcon>
         </div>
     )
 }

space_flow/src/pages/FlowPage/index.tsx

@@ -136,6 +136,7 @@ export default function FlowPage() {
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChangeMod}
         onConnect={onConnect}
+        onLoad={setReactFlowInstance}
         onInit={setReactFlowInstance}
         nodeTypes={nodeTypes}
         connectionLineComponent={connection}