text: import React, { Component } from "react";
  import { Modal } from "react-bootstrap";
  import AwesomeSlider from "react-awesome-slider";
  import AwesomeSliderStyles from "../scss/light-slider.scss";
  import AwesomeSliderStyles2 from "../scss/dark-slider.scss";
  import "react-awesome-slider/dist/custom-animations/scale-out-animation.css";
  class ProjectDetailsModal extends Component {
    render() {
      if (this.props.data) {
        const technologies = this.props.data.technologies;
        const images = this.props.data.images;
        var title = this.props.data.title;
        var description = this.props.data.description;
        var link = this.props.data.link;
        var github = this.props.data.github;
        var url = this.props.data.url;
        if (this.props.data.technologies) {
          var tech = technologies.map((icons, i) => {
            return (
              <li className="list-inline-item mx-3" key={i}>
                <span>
                  <div className="text-center">
                    <i className={icons.class} style={{ fontSize: "300%" }}>
                      <p className="text-center" style={{ fontSize: "30%" }}>
                        {icons.name}
                      </p>
                    </i>
                  </div>
                </span>
              </li>
            );
          });
          if (this.props.data.images) {
            var img = images.map((elem, i) => {
              return <div key={i} data-src={elem} />;
            });
          }
        }
      }
      return (
        <Modal
          {...this.props}
          size="lg"
          aria-labelledby="contained-modal-title-vcenter"
          centered
          className="modal-inside"
        >
          <span onClick={this.props.onHide} className="modal-close">
            <i className="fas fa-times fa-3x close-icon"></i>
          </span>
          <div className="col-md-12">
            <div className="col-md-10 mx-auto" style={{ paddingBottom: "50px" }}>
              <div className="slider-tab">
                <span
                  className="iconify slider-iconfiy"
                  data-icon="emojione:red-circle"
                  data-inline="false"
                  style={{ marginLeft: "5px" }}
                ></span>{" "}
                &nbsp;{" "}
                <span
                  className="iconify slider-iconfiy"
                  data-icon="twemoji:yellow-circle"
                  data-inline="false"
                ></span>{" "}
                &nbsp;{" "}
                <span
                  className="iconify slider-iconfiy"
                  data-icon="twemoji:green-circle"
                  data-inline="false"
                ></span>
              </div>
              <AwesomeSlider
                cssModule={[AwesomeSliderStyles, AwesomeSliderStyles2]}
                animation="scaleOutAnimation"
                className="slider-image"
              >
                {img}
              </AwesomeSlider>
            </div>
            <div className="col-md-10 mx-auto">
              <h3 style={{ padding: "5px 5px 0 5px" }}>
                {title}
                {url ? (
                  <a
                    href={url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="link-href"
                  >
                    <i
                      className="fas fa-external-link-alt"
                      style={{ marginLeft: "10px" }}
                    ></i>
                  </a>
                ) : null}
              </h3>
              <p className="modal-description">
                {description}
                <a
                  className="modal-description"
                  href={link}
                  style={{ display: "block", marginBottom: 0 }}
                >
                  {link}
                </a>
                <a
                  className="modal-description"
                  href={github}
                  style={{ display: "block" }}
                >
                  {github}
                </a>
              </p>
              <div className="col-md-12 text-center">
                <ul className="list-inline mx-auto">{tech}</ul>
              </div>
            </div>
          </div>
        </Modal>
      );
    }
  }
  
  export default ProjectDetailsModal;
  