Update/tabs

react_app/src/components/common/childrenTabs/index.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+export function ChildrenTabs() {
+  return (
+    <div>
+      <p>Tab content</p>
+    </div>
+  );
+}
+
+export function ChildrenTabs2() {
+  return (
+    <div>
+      <p>Children tab 2</p>
+    </div>
+  );
+}

react_app/src/components/common/tabsWithoutRouter/Tabs.jsx

@@ -39,17 +39,18 @@ function Tabs(props) {
         ))}
       </ul>
       <div className="outlet">
-        {data.map((item) => (
-          <TabContent id={item.id} activeTab={activeTab}>
-          {props.children.map((child) => {
-                    if (child.key === item.id) {
-                      return child;
-                    }})}
+        {data.map((item, index) => (
+          <TabContent id={item.id} activeTab={activeTab} key={index}>
+            {props.children.map((child) => {
+              if (child.key === item.id) {
+                return child;
+              }
+            })}
           </TabContent>
         ))}
       </div>
     </div>
   );
-};
+}
 
 export default Tabs;

react_app/src/data/tabData.js

@@ -0,0 +1,27 @@
+/*Tabs Data*/
+export const dataTabSequenciaExternalGeometry = [
+  {
+    id: "Revestimento anterior",
+    description: "Revestimento anterior",
+    name: "Revestimento anterior",
+  },
+  {
+    id: "Poço aberto",
+    description: "Poço aberto",
+    name: "Poço aberto",
+  },
+];
+
+/*Tabs Data*/
+export const dataTabSequencia = [
+  {
+    id: "Parâmetros Básicos",
+    description: "Parâmetros Básicos",
+    name: "Parâmetros Básicos",
+  },
+  {
+    id: "Parâmetros Avançados",
+    description: "Parâmetros Avançados",
+    name: "Parâmetros Avançados",
+  },
+];

react_app/src/pages/TabsComponents.js

@@ -1,43 +1,41 @@
 // #  Main Imports
-import React, { useState } from 'react';
+import React, { useContext } from 'react';
 
-import ReactDOM from "react-dom";
-import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
+// # Import Component Style
+import "./pages.css";
 
+// #  Local SubComponents & utils
+import { Tabs } from '../components/common';
 
-// # Import Component Style
-import './pages.css'
-import { TabsComponent } from '../components/common';
-
-
-
-
-const TabsComponents = (props) => {
-
-    const data = [
-
-        {name:"Centralizadores",
-         description:"Centralizadores",
-         id:"Accordions"
-       },
-       {name:"app",
-        description:"app",
-        id:"ProjectCards"
-       },
-
-    ]
-
-    const pages = {props}
-    return (
-
-        <> 
-            <TabsComponent  data = {data}>
-                <div key={"Accordions"}> Teste 1</div>
-                <div key={"ProjectCards"}> Teste 2</div>
-            </TabsComponent> 
-        </>
-
-    );
+/*Tabs Data*/
+import { dataTabSequencia } from "../data/tabData";
+
+// #  Local SubComponents & utils
+import { ChildrenTabs, ChildrenTabs2 } from "../components/common/childrenTabs";
+
+// # Context
+import { ActiveTabContext } from "../contexts/ActiveTabContext";
+
+
+const TabsComponents = () => {
+  /* State to control Tabs Component */
+  const { activeTab, setActiveTab } = useContext(ActiveTabContext);
+
+  /*Function to change id Tab*/
+  const handleClick = (id) => {
+    setActiveTab(id);
+  };
+
+  return (
+    <Tabs data={dataTabSequencia} activeTab={activeTab} callback={handleClick}>
+      <div key={"Parâmetros Básicos"}>
+        <ChildrenTabs />
+      </div>
+      <div key={"Parâmetros Avançados"}>
+        <ChildrenTabs2 />
+      </div>
+    </Tabs>
+  );
 };