@fortawesome/free-solid-svg-icons#faExclamation JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faExclamation.
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: Icon.js From mailmask with GNU Affero General Public License v3.0 | 6 votes |
|
ICONS = {
bars: faBars,
'check-circle': faCheckCircle,
'chevron-down': faChevronDown,
'chevron-right': faChevronRight,
'exchange-alt': faExchangeAlt,
exclamation: faExclamation,
'exclamation-triangle': faExclamationTriangle,
info: faInfo,
moon: faMoon,
question: faQuestion,
rss: faRss,
'sign-in-alt': faSignInAlt,
sun: faSun,
snowflake: faSnowflake,
star: faStar,
'times-circle': faTimesCircle,
user: faUser,
}
Example #2
| Source File: index.js From Webiu with MIT License | 4 votes |
|
GithubOrg = ({orgname, limit, title, auth_token}) => {
const [orgLoading, setOrgLoading] = useState(true)
const [reposLoading, setReposLoading] = useState(true)
const [org, setOrg] = useState(null)
const [repos, setRepos] = useState([]);
useEffect(() => {
const orgFetchUrl = `https://api.github.com/orgs/${orgname}?access_token=${auth_token}`
setOrgLoading(true)
fetch(orgFetchUrl, {
method: 'GET',
headers: new Headers({
'Authorization': auth_token,
'Content-Type': 'application/json'
})})
.then((res) => res.json()).then((data) => {
setOrg(data)
setOrgLoading(false)
})
.catch((err) => { throw err });
const repoFetchUrl = `https://api.github.com/orgs/${orgname}/repos?access_token=${auth_token}`
setReposLoading(true)
fetch(repoFetchUrl, {
method: 'GET',
headers: new Headers({
'Authorization': auth_token,
'Content-Type': 'application/json'
})})
.then((res) => res.json()).then((data) => {
setRepos(data)
setReposLoading(false)
})
.catch((err) => { throw err });
}, [orgname, auth_token])
return (
<div className="github-org-component">
{title ? <div className="header-component">
<h2><FontAwesomeIcon className="icon-h2" icon={faGithub} /> <span className="h2-title">{title} {orgname}</span></h2>
</div> : null}
{org && !org.message ?
<Container>
{orgLoading && <p>Fetching the profile</p>}
{org ?
<GithubCard name={org.name} description={org.description}
email={org.email} image={org.avatar_url}
username={org.login} url={org.html_url}
location={org.location} repo={org.public_repos}
from={org.created_at} blog={org.blog} />
: null}
<div style={{textAlign: "center"}}><h4>Repositories of {orgname}</h4></div>
<hr />
<div style={{textAlign: "center"}}>
{reposLoading && <p>Fetching the Repos</p>}
{repos.length > 1 ?
<Row>
{repos.map((item, index) => {
if(index < limit) {
return (
<Col lg={3} key={index}>
<div className="repo-card">
<p className="repo-title">{item.name}</p>
{item.description ? <p className="card-para">
{item.description.length > 30 ? item.description.substring(0,29) + ".." : item.description}
</p> : null}
<p className="card-para">
<FontAwesomeIcon icon={faExclamation} style={{color:'#51ad28'}} /> {item.open_issues} Open Issues
</p>
<p className="card-para">
<FontAwesomeIcon icon={faCodeBranch} style={{color:'#51ad28'}} /> {item.forks} Forks
</p>
<Link to={item.html_url} className="btn">GitHub</Link>
</div>
</Col>
)
}
})}
</Row>
: null}
</div>
</Container>
:<div style={{textAlign: "center"}}><h2>Organization Not Found, Please Check the Org Name or the Auth Token</h2></div>}
</div>
)
}
Example #3
| Source File: index.js From Webiu with MIT License | 4 votes |
|
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>
)
}
