UserDetails.js 1.5 KB

123456789101112131415161718192021222324252627282930313233343536
  1. import React from "react";
  2. const PropTypes = React.PropTypes;
  3. const UserDetails = (user) => {
  4. return (
  5. <div>
  6. {user.score && <li className="list-group-item"><h3>Score: {user.score}</h3></li>}
  7. <li className="list-group-item"><img src={user.info.avatar_url} className="img-rounded img-responsive" /></li>
  8. {user.info.name && <li className="list-group-item">Name: {user.info.name}</li>}
  9. <li className="list-group-item">Username: {user.info.login}</li>
  10. {user.info.location && <li className="list-group-item">Location: {user.info.location}</li>}
  11. {user.info.company && <li className="list-group-item">Company: {user.info.company}</li>}
  12. <li className="list-group-item">Followers: {user.info.followers}</li>
  13. <li className="list-group-item">Following: {user.info.following}</li>
  14. <li className="list-group-item">Public Repos: {user.info.public_repos}</li>
  15. {user.info.blog && <li className="list-group-item">Blog: <a href={user.info.blog}> {user.info.blog}</a></li>}
  16. </div>
  17. );
  18. };
  19. UserDetails.propTypes = {
  20. score: PropTypes.number,
  21. info: PropTypes.shape({
  22. avatar_url: PropTypes.string.isRequired,
  23. blog: PropTypes.string,
  24. company: PropTypes.string,
  25. followers: PropTypes.number.isRequired,
  26. following: PropTypes.number.isRequired,
  27. location: PropTypes.string,
  28. login: PropTypes.string.isRequired,
  29. name: PropTypes.string,
  30. public_repos: PropTypes.number.isRequired
  31. })
  32. };
  33. export default UserDetails;