profile-github-card/dist/index.js

Create GitHub card for your GitHub Account

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));

var styles = {};

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;
  subClass.__proto__ = superClass;
}

var Card = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Card, _React$Component);

  function Card(props) {
    var _image;

    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.style = {
      container: {
        padding: "2px 16px",
        width: "300px"
      },
      card: {
        width: "300px",
        boxShadow: "0 4px 8px 0 rgba(0,0,0,0.2)",
        transition: "0.3s",
        borderRadius: "5px",
        paddingBottom: "2px"
      },
      content: {
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        textAlign: "center"
      },
      cover: {
        height: "40px",
        backgroundColor: "black",
        width: "100%",
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
      },
      bio: {
        width: "90%",
        margin: "auto"
      },
      login: {
        color: "gray"
      },
      infoWrapper: {
        backgroundColor: "efefef",
        height: "50px",
        width: "90%",
        margin: "auto",
        marginBottom: "20px",
        marginTop: "20px",
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        textAlign: "center",
        borderRadius: "3%",
        borderTop: "5px solid black",
        boxShadow: "0 4px 8px 0 rgba(0,0,0,0.2)"
      },
      item: {
        margin: "0 10px"
      },
      link: {
        textDecoration: "none",
        color: "black"
      },
      image: (_image = {
        borderRadius: "5px 5px 0 0"
      }, _image["borderRadius"] = "50%", _image.width = "50%", _image.marginTop = "10px", _image.boxShadow = "0 4px 8px 0 rgba(0,0,0,0.2)", _image),
      header: {
        color: "white"
      },
      zeroMargin: {
        margin: "0"
      }
    };
    _this.state = {
      result: null,
      showFollowers: true
    };
    return _this;
  }

  var _proto = Card.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var _this2 = this;

    fetch("https://api.github.com/users/" + this.props.username).then(function (res) {
      return res.json();
    }).then(function (result) {
      _this2.setState({
        result: result
      });
    });
  };

  _proto.render = function render() {
    if (this.state.result) {
      var _this$state$result = this.state.result,
          avatar_url = _this$state$result.avatar_url,
          bio = _this$state$result.bio,
          public_repos = _this$state$result.public_repos,
          html_url = _this$state$result.html_url,
          login = _this$state$result.login,
          name = _this$state$result.name,
          following = _this$state$result.following,
          followers = _this$state$result.followers;
      return /*#__PURE__*/React.createElement("div", {
        style: this.style.card
      }, /*#__PURE__*/React.createElement("div", {
        style: this.style.content
      }, /*#__PURE__*/React.createElement("div", {
        style: this.style.cover
      }, /*#__PURE__*/React.createElement("h2", {
        style: this.style.header
      }, "GitHub")), /*#__PURE__*/React.createElement("img", {
        src: avatar_url,
        style: this.style.image
      }), /*#__PURE__*/React.createElement("div", {
        style: this.style.container
      }, /*#__PURE__*/React.createElement("h2", null, /*#__PURE__*/React.createElement("b", null, name)), /*#__PURE__*/React.createElement("a", {
        href: html_url,
        target: "_blank",
        style: this.style.link
      }, /*#__PURE__*/React.createElement("h4", {
        style: this.style.login
      }, "@", login)), /*#__PURE__*/React.createElement("p", {
        style: this.style.bio
      }, /*#__PURE__*/React.createElement("b", null, bio)))), /*#__PURE__*/React.createElement("div", {
        style: this.style.infoWrapper
      }, this.state.showFollowers ? /*#__PURE__*/React.createElement("div", {
        style: this.style.item
      }, /*#__PURE__*/React.createElement("h4", {
        style: this.style.zeroMargin
      }, followers), /*#__PURE__*/React.createElement("h5", {
        style: this.style.zeroMargin
      }, "Followers")) : null, /*#__PURE__*/React.createElement("div", {
        style: this.style.item
      }, /*#__PURE__*/React.createElement("h4", {
        style: this.style.zeroMargin
      }, following), /*#__PURE__*/React.createElement("h5", {
        style: this.style.zeroMargin
      }, "Following")), /*#__PURE__*/React.createElement("div", {
        style: this.style.item
      }, /*#__PURE__*/React.createElement("h4", {
        style: this.style.zeroMargin
      }, public_repos), /*#__PURE__*/React.createElement("h5", {
        style: this.style.zeroMargin
      }, "Repositories"))));
    } else {
      return /*#__PURE__*/React.createElement("div", null, "Loading");
    }
  };

  return Card;
}(React.Component);

var GitHubCard = function GitHubCard(_ref) {
  var username = _ref.username;
  return /*#__PURE__*/React.createElement("div", {
    className: styles.test
  }, /*#__PURE__*/React.createElement(Card, {
    username: username
  }));
};

exports.GitHubCard = GitHubCard;
//# sourceMappingURL=index.js.map