text: /* eslint-disable no-unused-vars */
  import React, {useState} from 'react';
  import {useTranslation} from 'react-i18next';
  import Tab from 'react-bootstrap/Tab';
  import Tabs from 'react-bootstrap/Tabs';
  import Card from '../../components/card/Card';
  import LayoutDetailIoTableContainer from '../../containers/layout/LayoutDetailIoTableContainer';
  
  const LayoutDetailTab = () => {
      const [t] = useTranslation();
      const [key, setKey] = useState('input');
      return (
          <>
              <Card
                  title={t('pages.layout.interfaceColumn')}
                  body={
                      <>
                          <Tabs
                              activeKey={key}
                              onSelect={(k) => setKey(k)}
                              transition={false}
                              id="noanim-tab-example"
                          >
                              <Tab eventKey="input" title="Input">
                                  <br /> <br />
                                  <LayoutDetailIoTableContainer ioType="in" />
                              </Tab>
                              <Tab eventKey="output" title="Output">
                                  <br /> <br />
                                  <LayoutDetailIoTableContainer ioType="out" />
                              </Tab>
                          </Tabs>
                      </>
                  }
              />
          </>
      );
  };
  
  export default LayoutDetailTab;
  