Tabs styled and function added

space_flow/src/App.tsx

@@ -110,9 +110,7 @@ export default function App() {
           <main className="min-w-0 flex-1 border-t border-gray-200 flex">
             {/* Primary column */}
             <div className="w-full h-full">
-              <TabsProvider>
                 <TabsManager></TabsManager>
-              </TabsProvider>
             </div>
           </main>
         </div>

space_flow/src/contexts/index.tsx

@@ -1,6 +1,7 @@
 import { AlertProvider } from "./alertContext";
 import { LocationProvider } from "./locationContext";
 import PopUpProvider from "./popUpContext";
+import { TabsProvider } from "./tabsContext";
 import { TypesProvider } from "./typesContext";
 
 export default function ContextWrapper({ children }) {
@@ -9,7 +10,9 @@ export default function ContextWrapper({ children }) {
       <LocationProvider>
         <PopUpProvider>
           <TypesProvider>
-            <AlertProvider>{children}</AlertProvider>
+            <TabsProvider>
+              <AlertProvider>{children}</AlertProvider>
+            </TabsProvider>
           </TypesProvider>
         </PopUpProvider>
       </LocationProvider>

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

@@ -1,10 +1,10 @@
-import { PlusIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import { ReactFlowProvider } from "reactflow";
 import FlowPage from "..";
 import { TabsContext } from "../../../contexts/tabsContext";
 import TabComponent from "./tabComponent";
+import { PlusIcon } from '@heroicons/react/24/outline';
 var _ = require("lodash");
 
 export function TabsManager() {

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

@@ -1,24 +1,31 @@
-import { XMarkIcon } from "@heroicons/react/24/solid";
+import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
 import { useContext } from "react";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { classNames } from "../../../../utils";
 
-export default function TabComponent({ children, selected, id, onClick}) {
+export default function TabComponent({ selected, flow, id, onClick}) {
 	const { removeFlow, flows } = useContext(TabsContext);
 	return (
-		<div onClick={onClick}
+		<>
-			className={classNames(
+      {flow ? (
-				selected ? " shadow-lg" : "bg-gray-300",
+        selected ? (
-				"flex border-t border-l border-r border-black rounded-t-md shadow-sm cursor-pointer"
+          <button
-			)}
+            className="px-4 my-2 mt-3 border-l border-gray-300 -ml-px"
-		>
+            onClick={onClick}
-			{children}
+          >
-			{flows.length > 1 && (
+            {flow.name}
-				<XMarkIcon
+          </button>
-					className="w-5 hover:text-red-500"
+        ) : (
-					onClick={() => removeFlow(id)}
+          <div className="bg-white pt-3 pointer-events-none border border-b-0 border-gray-300 px-4 py-2 rounded-t-xl">
-				></XMarkIcon>
+            {flow.name}
-			)}
+          </div>
-		</div>
+        )
-	);
+      ) : (
-}
+        <div className="h-full py-2 pt-3 flex justify-center items-center">
+          <button className="px-3 h-full border-l border-gray-300 -ml-px">
+            <PlusIcon className="h-5" />
+          </button>
+        </div>
+      )}
+    </>
+    )}