text: import React from "react"
  import {
    Button,
    Modal,
    ModalHeader,
    ModalBody,
    ModalFooter,
    Card,
    CardHeader,
    CardBody,
    CardTitle,
    TabContent,
    TabPane,
    Nav,
    NavItem,
    NavLink
  } from "reactstrap"
  import classnames from "classnames"
  import { Eye, Code } from "react-feather"
  import { modalCentered } from "./ModalSourceCode"
  
  class ModalCentered extends React.Component {
    state = {
      activeTab: "1",
      modal: false
    }
  
    toggleTab = tab => {
      if (this.state.activeTab !== tab) {
        this.setState({ activeTab: tab })
      }
    }
  
    toggleModal = () => {
      this.setState(prevState => ({
        modal: !prevState.modal
      }))
    }
  
    render() {
      return (
        <React.Fragment>
          <Card>
            <CardHeader>
              <CardTitle>Vertically Centered</CardTitle>
              <div className="views">
                <Nav tabs>
                  <NavItem>
                    <NavLink
                      className={classnames({
                        active: this.state.activeTab === "1"
                      })}
                      onClick={() => {
                        this.toggleTab("1")
                      }}
                    >
                      <Eye size={15} />
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      className={classnames({
                        active: this.state.activeTab === "2"
                      })}
                      onClick={() => {
                        this.toggleTab("2")
                      }}
                    >
                      <Code size={15} />
                    </NavLink>
                  </NavItem>
                </Nav>
              </div>
            </CardHeader>
            <CardBody>
              <p>
                Use class <code>.modal-dialog-centered</code> with{" "}
                <code>Modal</code> tag to vertically center modal.
              </p>
              <TabContent activeTab={this.state.activeTab}>
                <TabPane tabId="1">
                  <Button.Ripple
                    color="primary"
                    className="btn-block"
                    size="lg"
                    outline
                    block
                    onClick={this.toggleModal}
                  >
                    Launch Modal
                  </Button.Ripple>
                  <Modal
                    isOpen={this.state.modal}
                    toggle={this.toggleModal}
                    className="modal-dialog-centered"
                  >
                    <ModalHeader toggle={this.toggleModal}>
                      Vertically Centered
                    </ModalHeader>
                    <ModalBody>
                      Oat cake ice cream candy chocolate cake chocolate cake
                      cotton candy dragée apple pie. Brownie carrot cake candy
                      canes bonbon fruitcake topping halvah. Cake sweet roll cake
                      cheesecake cookie chocolate cake liquorice.
                    </ModalBody>
                    <ModalFooter>
                      <Button color="primary" onClick={this.toggleModal}>
                        Accept
                      </Button>{" "}
                    </ModalFooter>
                  </Modal>
                </TabPane>
                <TabPane className="component-code" tabId="2">
                  {modalCentered}
                </TabPane>
              </TabContent>
            </CardBody>
          </Card>
        </React.Fragment>
      )
    }
  }
  export default ModalCentered
  