@fortawesome/free-solid-svg-icons#faIdBadge JavaScript Examples

The following examples show how to use @fortawesome/free-solid-svg-icons#faIdBadge. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.js    From Webiu with MIT License 4 votes vote down vote up 
GithubRepo = ({ reponame, title, auth_token }) => {

  const [loading, setLoading] = useState(true)
  const [repo, setRepo] = useState(null)

  useEffect(() => {
    const repoFetchUrl = `https://api.github.com/repos/${reponame}?access_token=${auth_token}`
    setLoading(true)
    fetch(repoFetchUrl, { 
      method: 'GET', 
      headers: new Headers({
        'Authorization': auth_token, 
        'Content-Type': 'application/json'
    })})
    .then((res) => res.json()).then((data) => {
      setRepo(data)
      setLoading(false)
    })
    .catch((err) => { throw err });
  }, [reponame, auth_token])

  return (
    <div className="github-repo-component">
      {title ? <div className="header-component">
        <h2><FontAwesomeIcon className="icon-h2" icon={faGithub} /> <span className="h2-title">{title}</span></h2>
      </div> : null}
      {repo && !repo.message ?
      <Container>
        {loading && <p>Fetching the details</p>}
        {repo ? 
          <GithubCard name={repo.name} description={repo.description.substring(0, 300)} 
                      image={repo.organization.avatar_url}
                      username={repo.full_name} url={repo.html_url}
                      from={repo.created_at} /> 
        : null}
        <div style={{textAlign: "center"}}>
            {loading && <p>Fetching the details</p>}
            {repo ?
                <Row>   
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faAsterisk} /> Owner</p>
                      <p className="card-para">{repo.owner.login}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faCode} /> Languages</p>
                      <p className="card-para">{repo.language}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faCodeBranch} /> No. of Forks</p>
                      <p className="card-para">{repo.forks}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faHistory} /> Last Updated</p>
                      <p className="card-para">{moment(repo.upadted_at).format("MMMM Do YYYY")}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faExclamation} /> Open Issues</p>
                      <p className="card-para">{repo.open_issues_count} Issues Opened</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faUser} /> No. of Contributors</p>
                      <p className="card-para">{repo.subscribers_count}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faGithubAlt} /> default Branch</p>
                      <p className="card-para">{repo.default_branch}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faIdBadge} /> License</p>
                      <p className="card-para">{repo.license.name}</p>
                    </div> 
                  </Col>
                </Row> 
            : null}
        </div>
        
      </Container>    
      : <div style={{textAlign: "center"}}><h2>Repo Not Found, Please check the repo name or the Auth Token</h2></div>} 
    </div>
  )
}