weseek__growi/src/client/js/components/Me/PersonalSettings.jsx

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';

import UserSettings from './UserSettings';
import PasswordSettings from './PasswordSettings';
import ExternalAccountLinkedMe from './ExternalAccountLinkedMe';
import ApiSettings from './ApiSettings';

class PersonalSettings extends React.Component {

  render() {
    const { t } = this.props;

    return (
      <Fragment>
        <div className="personal-settings">
          <ul className="nav nav-tabs" role="tablist">
            <li className="nav-item">
              <a className="nav-link active" href="#user-settings" data-toggle="tab" role="tab">
                <i className="icon-fw icon-user"></i>{ t('User Information') }
              </a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#external-accounts" data-toggle="tab" role="tab">
                <i className="icon-fw icon-share-alt"></i>{ t('admin:user_management.external_accounts') }
              </a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#password-settings" data-toggle="tab" role="tab">
                <i className="icon-fw icon-lock"></i>{ t('Password Settings') }
              </a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#apiToken" data-toggle="tab" role="tab">
                <i className="icon-fw icon-paper-plane"></i>{ t('API Settings') }
              </a>
            </li>
          </ul>
          <div className="tab-content p-t-10">
            <div id="user-settings" className="tab-pane active" role="tabpanel">
              <UserSettings />
            </div>
            <div id="external-accounts" className="tab-pane" role="tabpanel">
              <ExternalAccountLinkedMe />
            </div>
            <div id="password-settings" className="tab-pane" role="tabpanel">
              <PasswordSettings />
            </div>
            <div id="apiToken" className="tab-pane" role="tabpanel">
              <ApiSettings />
            </div>
          </div>
        </div>
      </Fragment>
    );
  }

}

PersonalSettings.propTypes = {
  t: PropTypes.func.isRequired, // i18next
};

export default withTranslation()(PersonalSettings);