@fortawesome/free-solid-svg-icons#faCodeBranch JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faCodeBranch.
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: Footer.jsx From signdocs with MIT License | 6 votes |
|
Footer = () => {
return (
<footer id="footer">
<div className="flex-row-container flex-center small smallest">
<div className="footer-links">
<a href="https://github.com/philgresh/">
<FontAwesomeIcon icon={faGithub} color="inherit" />
</a>
<a href="https://www.linkedin.com/in/philgresham">
<FontAwesomeIcon icon={faLinkedin} color="inherit" />
</a>
<a href="https://gresham.dev">
<FontAwesomeIcon icon={faHome} color="inherit" />
</a>
<EmailObfuscation>
<FontAwesomeIcon icon={faEnvelope} color="inherit" />
</EmailObfuscation>
<a href="https://github.com/philgresh/signdocs">
<FontAwesomeIcon icon={faCodeBranch} color="inherit" />
</a>
</div>
</div>
</footer>
);
}
Example #2
| Source File: index.js From Webiu with MIT License | 5 votes |
|
GithubContributors = ({projectname, title, auth_token, limit, showSearchBar}) => {
const [loading, setLoading] = useState(true)
const [contributors, setContributors] = useState(null)
const [searchItem, setSearchItem] = useState("");
const [searchResults, setSearchResults] = useState(contributors)
useEffect(() => {
const contributorsFetchUrl = `https://api.github.com/repos/${projectname}/contributors?access_token=${auth_token}`
setLoading(true)
fetch(contributorsFetchUrl, {
method: 'GET',
headers: new Headers({
'Authorization': auth_token,
'Content-Type': 'application/json'
})})
.then((res) => res.json()).then((data) => {
setContributors(data)
setSearchResults(data)
setLoading(false)
})
.catch((err) => { throw err });
}, [projectname, auth_token])
const handleSearch = async (searchItem) => {
const results = contributors.filter(contributor =>
contributor.login.toLowerCase().includes(searchItem)
);
setSearchItem(searchItem);
setSearchResults(results);
}
return (
<div className="github-contributors-component">
{title ? <div className="header-component">
<h2><FontAwesomeIcon className="icon-h2" icon={faGithub} /> <span className="h2-title">{title} {projectname}</span></h2>
</div> : null}
{contributors && !contributors.message ?
<Container>
{loading && <p>Fetching the profile</p>}
<div className="contributors-search">{showSearchBar ? <SearchBar input={searchItem} handleSearch={handleSearch} placeHolder="Search Contributors" />: null}</div>
<Row>
{searchResults && searchResults.map((member, index) => {
if(index < limit){
return (
<div className="member-card" key={index} onClick={() => window.open(member.html_url, "_blank")}>
<div><img src={member.avatar_url} alt="Profile-img" className="member-img" /></div>
<p className="member-title">{member.login}</p>
</div>
)
}
})}
</Row>
<div style={{textAlign: "center"}}>
<p className="member-para"><FontAwesomeIcon className="icon" icon={faCodeBranch} /> We value our Contributors!</p>
</div>
</Container>
: <div style={{textAlign: "center"}}><h2>Project Not Found, Please Check the Project name or the Auth-Token</h2></div>}
</div>
)
}
Example #3
| Source File: RemoteManagementComponent.js From gitconvex with Apache License 2.0 | 4 votes |
|
export default function AddRemoteRepoComponent({ repoId }) {
const [reloadView, setReloadView] = useState(false);
const [fieldMissing, setFieldMissing] = useState(false);
const [invalidUrl, setInvalidUrl] = useState(false);
const [remoteForm, setRemoteForm] = useState(false);
const [deleteFailed, setDeleteFailed] = useState(false);
const [addNewRemote, setAddNewRemote] = useState(true);
const [addRemoteStatus, setAddRemoteStatus] = useState(false);
const [statusCheck, setStatusCheck] = useState(false);
const [remoteOperation, setRemoteOperation] = useState("add");
const [fetchStatus, setFetchStatus] = useState(false);
const [remoteDetails, setRemoteDetails] = useState([]);
useEffect(() => {
let remoteArray = [];
axios({
url: globalAPIEndpoint,
method: "POST",
data: {
query: `
query {
getRemote(repoId: "${repoId}"){
remoteName
remoteUrl
}
}
`,
},
})
.then((res) => {
if (res.data.data.getRemote) {
res.data.data.getRemote.forEach((items) => {
remoteArray.push(items);
});
setRemoteDetails([...remoteArray]);
setStatusCheck(false);
setFetchStatus(false);
setRemoteOperation("");
}
})
.catch((err) => {
setFetchStatus(true);
console.log(err);
});
return () => {
setRemoteDetails([]);
setReloadView(false);
};
}, [reloadView, repoId]);
const statusPillComponent = (border, bgColor, textColor, message) => {
return (
<div
className={`${border} ${bgColor} ${textColor} border-b-2 font-sans text-xl border-dashed text-center rounded-b-none rounded-t-lg w-full py-6`}
>
{message}
</div>
);
};
return (
<div
className="w-11/12 m-auto rounded-lg xl:w-3/4 lg:w-3/4 md:w-11/12 sm:w-11/12"
style={{ backgroundColor: "#edf2f7" }}
>
{fetchStatus ? (
<div className="w-3/4 mx-auto">
<div className="items-center w-full p-6 my-12 text-2xl text-center text-red-900 bg-red-200 border-2 border-red-800 rounded-md text-semibold">
Failed to fetch remote
</div>
</div>
) : (
<>
{statusCheck ? (
<div className="w-3/4 mx-auto">
<div className="items-center w-full p-6 my-12 text-2xl text-center text-red-900 bg-red-200 border-2 border-red-800 rounded-md text-semibold">
Failed to {remoteOperation} remote
</div>
</div>
) : (
<>
{addRemoteStatus
? statusPillComponent(
"border-red-800",
"bg-red-200",
"text-red-900",
"Remote name already exist!"
)
: null}
{fieldMissing
? statusPillComponent(
"border-indigo-800",
"bg-indigo-200",
"text-indigo-900",
"One or more required parameters are empty!"
)
: null}
{invalidUrl
? statusPillComponent(
"border-yellow-800",
"bg-yellow-200",
"text-yellow-900",
"URL with whitespace is invalid!"
)
: null}
{deleteFailed
? statusPillComponent(
"border-red-800",
"bg-red-200",
"text-red-900",
"Failed to delete"
)
: null}
<div className="w-full p-2 pt-6 pb-8">
<div className="flex items-center m-6 font-sans text-xl font-semibold text-gray-800 xl:text-3xl lg:text-3xl md:text-2xl sm:text-xl">
<FontAwesomeIcon
icon={faCodeBranch}
className="mx-2 text-xl xl:text-3xl lg:text-3xl md:text-2xl sm:text-xl"
></FontAwesomeIcon>
<div className="pb-2 border-b-4 border-blue-400 border-dashed">
Remote details
</div>
{addNewRemote && remoteDetails.length > 0 ? (
<div
className="px-3 py-2 mx-6 font-sans text-base text-gray-800 bg-blue-200 rounded cursor-pointer xl:text-lg lg:text-lg md:text-base hover:bg-blue-300 hover:text-gray-900"
onClick={() => {
setAddNewRemote(false);
setRemoteForm(true);
}}
>
Add new remote
</div>
) : null}
</div>
<div className="w-11/12 mx-auto">
{remoteDetails && remoteDetails.length > 0 ? (
<>
<div className="flex items-center w-full">
<div className="w-1/4 mx-auto font-sans text-lg font-semibold text-center text-gray-600 xl:text-2xl lg:text-2xl md:text-xl">
Remote name
</div>
<div className="w-7/12 mx-auto font-sans text-lg font-semibold text-center text-gray-600 xl:text-2xl lg:text-2xl md:text-xl">
Remote URL
</div>
<div
className="mx-auto font-sans text-lg font-semibold text-center text-gray-600 xl:text-2xl lg:text-2xl md:text-xl"
style={{ width: "22%" }}
>
Actions
</div>
</div>
{remoteForm ? (
<AddRemoteRepoFormComponent
setReloadView={setReloadView}
setRemoteForm={setRemoteForm}
setFieldMissing={setFieldMissing}
setInvalidUrl={setInvalidUrl}
setAddNewRemote={setAddNewRemote}
setAddRemoteStatus={setAddRemoteStatus}
repoId={repoId}
setStatusCheck={setStatusCheck}
setRemoteOperation={setRemoteOperation}
></AddRemoteRepoFormComponent>
) : null}
<div
className="flex flex-col items-center w-full mt-3 mb-4 overflow-auto"
style={{ maxHeight: "350px" }}
>
{remoteDetails.map((items) => {
const { remoteName, remoteUrl } = items;
return (
<RemoteCard
key={remoteName}
remoteName={remoteName}
remoteUrl={remoteUrl}
setFieldMissing={setFieldMissing}
setInvalidUrl={setInvalidUrl}
setAddRemoteStatus={setAddRemoteStatus}
setDeleteFailed={setDeleteFailed}
setReloadView={setReloadView}
repoId={repoId}
setStatusCheck={setStatusCheck}
setRemoteOperation={setRemoteOperation}
></RemoteCard>
);
})}
</div>
</>
) : (
<AddRemoteRepoFormComponent
setReloadView={setReloadView}
setRemoteForm={setRemoteForm}
setInvalidUrl={setInvalidUrl}
setFieldMissing={setFieldMissing}
setAddNewRemote={setAddNewRemote}
setAddRemoteStatus={setAddRemoteStatus}
repoId={repoId}
setStatusCheck={setStatusCheck}
setRemoteOperation={setRemoteOperation}
></AddRemoteRepoFormComponent>
)}
</div>
</div>
</>
)}
</>
)}
</div>
);
}
Example #4
| 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 #5
| 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>
)
}
