From bfc79c9f26ba5cd75d171a069d0195a06b485b67 Mon Sep 17 00:00:00 2001
From: nicocappabianca <nicolas.cappabianca@gmail.com>
Date: Sat, 8 Aug 2020 21:49:36 -0300
Subject: [PATCH] add tabs in Configure View

---
 .../admin-lte/configure/TabsMenu.js           | 23 +++++++++++++++++++
 src/components/admin-lte/configure/index.js   | 20 ++++++----------
 2 files changed, 30 insertions(+), 13 deletions(-)
 create mode 100644 src/components/admin-lte/configure/TabsMenu.js

diff --git a/src/components/admin-lte/configure/TabsMenu.js b/src/components/admin-lte/configure/TabsMenu.js
new file mode 100644
index 0000000..a24c9cb
--- /dev/null
+++ b/src/components/admin-lte/configure/TabsMenu.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { Tabs, Tab } from 'react-bootstrap'
+import MenuComponents from './menu-components'
+
+
+function TabsMenu(props) {
+    return (   
+        <React.Fragment>         
+            {MenuComponents.length > 0 &&
+            <Tabs defaultActiveKey="Configure" id="configure-tabs" onSelect={props.onSelect}>
+                <Tab
+                    title="General"
+                    eventKey="Configure"
+                />
+        
+                {MenuComponents.map(menuItem => <Tab key={menuItem.id} eventKey={menuItem.key} title={menuItem.key}/>)}
+            </Tabs>}
+        </React.Fragment> 
+    )
+}
+
+export default TabsMenu; 
+
diff --git a/src/components/admin-lte/configure/index.js b/src/components/admin-lte/configure/index.js
index 41b8bd4..d953841 100644
--- a/src/components/admin-lte/configure/index.js
+++ b/src/components/admin-lte/configure/index.js
@@ -1,11 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Content, Row, Col, Box, Inputs, Button, ButtonGroup } from 'adminlte-2-react'
+import { Content, Row, Col, Box, Inputs, Button } from 'adminlte-2-react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import MenuComponents from './menu-components'
 // import BchWallet from 'minimal-slp-wallet'
 import Servers from './servers'
 import { setWalletInfo } from '../../localWallet'
+import TabsMenu from './TabsMenu'
 
 const { Text } = Inputs
 
@@ -28,23 +29,16 @@ class Configure extends React.Component {
     }
 
     _this.BchWallet = BchWallet
+
+    this.handleSelect = key => {
+      _this.setState({ menuItem: key }); 
+    }
   }
 
   render () {
     return (
       <Content>
-        {MenuComponents.length > 0 &&
-          <ButtonGroup margin>
-            <Button
-              margin
-              text='General'
-              type='primary'
-              className='btn-md mt-1'
-              onClick={() => _this.setState({ menuItem: 'Configure' })}
-            />
-
-            {MenuComponents.map(menuItem => <Button key={menuItem.key} margin className='btn-md mt-1' type='primary' onClick={() => _this.setState({ menuItem: menuItem.key })} text={menuItem.key} />)}
-          </ButtonGroup>}
+        <TabsMenu onSelect={this.handleSelect} />
         {_this.state.menuItem === 'Configure' &&
           <>
             <Row>