text: /*!
  
  =========================================================
  * Argon Design System React - v1.1.0
  =========================================================
  
  * Product Page: https://www.creative-tim.com/product/argon-design-system-react
  * Copyright 2020 Abdallah Alabed (https://www.creative-tim.com)
  * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/main/LICENSE.md)
  
  * Coded by Abdallah Alabed
  
  =========================================================
  
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  
  */
  import React from "react";
  // nodejs library that concatenates classes
  import classnames from "classnames";
  
  // reactstrap components
  import {
    Card,
    CardBody,
    NavItem,
    NavLink,
    Nav,
    TabContent,
    TabPane,
    Row,
    Col
  } from "reactstrap";
  
  class TabsSection extends React.Component {
    state = {
      iconTabs: 1,
      plainTabs: 1
    };
    toggleNavs = (e, state, index) => {
      e.preventDefault();
      this.setState({
        [state]: index
      });
    };
    render() {
      return (
        <>
          <h3 className="h4 text-success font-weight-bold mb-4">Tabs</h3>
          <Row className="justify-content-center">
            <Col lg="6">
              {/* Tabs with icons */}
              <div className="mb-3">
                <small className="text-uppercase font-weight-bold">
                  With icons
                </small>
              </div>
              <div className="nav-wrapper">
                <Nav
                  className="nav-fill flex-column flex-md-row"
                  id="tabs-icons-text"
                  pills
                  role="tablist"
                >
                  <NavItem>
                    <NavLink
                      aria-selected={this.state.iconTabs === 1}
                      className={classnames("mb-sm-3 mb-md-0", {
                        active: this.state.iconTabs === 1
                      })}
                      onClick={e => this.toggleNavs(e, "iconTabs", 1)}
                      href="#pablo"
                      role="tab"
                    >
                      <i className="ni ni-cloud-upload-96 mr-2" />
                      Home
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      aria-selected={this.state.iconTabs === 2}
                      className={classnames("mb-sm-3 mb-md-0", {
                        active: this.state.iconTabs === 2
                      })}
                      onClick={e => this.toggleNavs(e, "iconTabs", 2)}
                      href="#pablo"
                      role="tab"
                    >
                      <i className="ni ni-bell-55 mr-2" />
                      Profile
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      aria-selected={this.state.iconTabs === 3}
                      className={classnames("mb-sm-3 mb-md-0", {
                        active: this.state.iconTabs === 3
                      })}
                      onClick={e => this.toggleNavs(e, "iconTabs", 3)}
                      href="#pablo"
                      role="tab"
                    >
                      <i className="ni ni-calendar-grid-58 mr-2" />
                      Messages
                    </NavLink>
                  </NavItem>
                </Nav>
              </div>
              <Card className="shadow">
                <CardBody>
                  <TabContent activeTab={"iconTabs" + this.state.iconTabs}>
                    <TabPane tabId="iconTabs1">
                      <p className="description">
                        Raw denim you probably haven't heard of them jean shorts
                        Austin. Nesciunt tofu stumptown aliqua, retro synth main
                        cleanse. Mustache cliche tempor, williamsburg carles vegan
                        helvetica. Reprehenderit butcher retro keffiyeh
                        dreamcatcher synth.
                      </p>
                      <p className="description">
                        Raw denim you probably haven't heard of them jean shorts
                        Austin. Nesciunt tofu stumptown aliqua, retro synth main
                        cleanse.
                      </p>
                    </TabPane>
                    <TabPane tabId="iconTabs2">
                      <p className="description">
                        Cosby sweater eu banh mi, qui irure terry richardson ex
                        squid. Aliquip placeat salvia cillum iphone. Seitan
                        aliquip quis cardigan american apparel, butcher voluptate
                        nisi qui.
                      </p>
                    </TabPane>
                    <TabPane tabId="iconTabs3">
                      <p className="description">
                        Raw denim you probably haven't heard of them jean shorts
                        Austin. Nesciunt tofu stumptown aliqua, retro synth main
                        cleanse. Mustache cliche tempor, williamsburg carles vegan
                        helvetica. Reprehenderit butcher retro keffiyeh
                        dreamcatcher synth.
                      </p>
                    </TabPane>
                  </TabContent>
                </CardBody>
              </Card>
            </Col>
            <Col className="mt-5 mt-lg-0" lg="6">
              {/* Menu */}
              <div className="mb-3">
                <small className="text-uppercase font-weight-bold">
                  With text
                </small>
              </div>
              <div className="nav-wrapper">
                <Nav
                  className="nav-fill flex-column flex-md-row"
                  id="tabs-icons-text"
                  pills
                  role="tablist"
                >
                  <NavItem>
                    <NavLink
                      aria-selected={this.state.plainTabs === 1}
                      className={classnames("mb-sm-3 mb-md-0", {
                        active: this.state.plainTabs === 1
                      })}
                      onClick={e => this.toggleNavs(e, "plainTabs", 1)}
                      href="#pablo"
                      role="tab"
                    >
                      Home
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      aria-selected={this.state.plainTabs === 2}
                      className={classnames("mb-sm-3 mb-md-0", {
                        active: this.state.plainTabs === 2
                      })}
                      onClick={e => this.toggleNavs(e, "plainTabs", 2)}
                      href="#pablo"
                      role="tab"
                    >
                      Profile
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      aria-selected={this.state.plainTabs === 3}
                      className={classnames("mb-sm-3 mb-md-0", {
                        active: this.state.plainTabs === 3
                      })}
                      onClick={e => this.toggleNavs(e, "plainTabs", 3)}
                      href="#pablo"
                      role="tab"
                    >
                      Messages
                    </NavLink>
                  </NavItem>
                </Nav>
              </div>
              <Card className="shadow">
                <CardBody>
                  <TabContent activeTab={"plainTabs" + this.state.plainTabs}>
                    <TabPane tabId="plainTabs1">
                      <p className="description">
                        Raw denim you probably haven't heard of them jean shorts
                        Austin. Nesciunt tofu stumptown aliqua, retro synth main
                        cleanse. Mustache cliche tempor, williamsburg carles vegan
                        helvetica. Reprehenderit butcher retro keffiyeh
                        dreamcatcher synth.
                      </p>
                      <p className="description">
                        Raw denim you probably haven't heard of them jean shorts
                        Austin. Nesciunt tofu stumptown aliqua, retro synth main
                        cleanse.
                      </p>
                    </TabPane>
                    <TabPane tabId="plainTabs2">
                      <p className="description">
                        Cosby sweater eu banh mi, qui irure terry richardson ex
                        squid. Aliquip placeat salvia cillum iphone. Seitan
                        aliquip quis cardigan american apparel, butcher voluptate
                        nisi qui.
                      </p>
                    </TabPane>
                    <TabPane tabId="plainTabs3">
                      <p className="description">
                        Raw denim you probably haven't heard of them jean shorts
                        Austin. Nesciunt tofu stumptown aliqua, retro synth main
                        cleanse. Mustache cliche tempor, williamsburg carles vegan
                        helvetica. Reprehenderit butcher retro keffiyeh
                        dreamcatcher synth.
                      </p>
                    </TabPane>
                  </TabContent>
                </CardBody>
              </Card>
            </Col>
          </Row>
        </>
      );
    }
  }
  
  export default TabsSection;
  