boiller code for tabs on reactFlow, need to think and structure first the logic

space_flow/package-lock.json

@@ -28,6 +28,7 @@
         "react-laag": "^2.0.5",
         "react-router-dom": "^6.8.1",
         "react-scripts": "5.0.1",
+        "react-tabs": "^6.0.0",
         "reactflow": "^11.5.5",
         "tailwindcss": "^3.2.6",
         "typescript": "^4.9.5",
@@ -15070,6 +15071,18 @@
         }
       }
     },
+    "node_modules/react-tabs": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.0.tgz",
+      "integrity": "sha512-8jKLKrlwxmn5/+xsa76yi27ZdB8E/WhlhQZw739O5UlOeUGtVoVeWnpqIewv/KbjTw7gQf/uA51zWUNt4IVygQ==",
+      "dependencies": {
+        "clsx": "^1.1.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

space_flow/package.json

@@ -23,6 +23,7 @@
     "react-laag": "^2.0.5",
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
+    "react-tabs": "^6.0.0",
     "reactflow": "^11.5.5",
     "tailwindcss": "^3.2.6",
     "typescript": "^4.9.5",

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

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import FlowPage from '..';
+import 'react-tabs/style/react-tabs.css';
+
+interface FlowTabProps {
+  flow:any;
+}
+
+function FlowTab() {
+  return (
+    <FlowPage></FlowPage>
+  );
+}
+
+function App() {
+  const [flows, setFlows] = useState([]); // Start with one flow
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  function onElementsChange(flowIndex: number, elements: any[]) {
+    setFlows((prevFlows) => {
+      const newFlows = [...prevFlows];
+      newFlows[flowIndex] = elements;
+      return newFlows;
+    });
+  }
+
+  function addTab() {
+    setFlows([...flows, []]); // Add a new flow to the state
+    setActiveIndex(flows.length); // Activate the new tab
+  }
+
+  return (
+    <Tabs selectedIndex={activeIndex} onSelect={setActiveIndex}>
+      <TabList>
+        {flows.map((flow, index) => (
+          <Tab key={index}>Flow {index + 1}</Tab>
+        ))}
+        <button onClick={addTab}>+</button> {/* Render the plus button */}
+      </TabList>
+
+      {flows.map((flow, index) => (
+        <TabPanel key={index}>
+          <FlowTab />
+        </TabPanel>
+      ))}
+    </Tabs>
+  );
+}