react-icons/fa#FaGithubAlt JavaScript Examples
The following examples show how to use
react-icons/fa#FaGithubAlt.
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: vars.js From hexapod with Apache License 2.0 | 5 votes |
|
ICON_COMPONENTS = {
mug: <GiCoffeeMug className="vertical-align" />,
circle: <GrStatusGoodSmall className="small-icon" />,
octocat: <FaGithubAlt className="vertical-align" />,
times: <FaTimes className="vertical-align" />,
home: <FaHome className="vertical-align" />,
}
Example #2
| Source File: index.js From FinDevs with MIT License | 5 votes |
|
// import Swal from 'sweetalert2'
export default function DevItem({ dev, deletar }) {
// async function handleRemoveUser() {
// await Swal.fire({
// title: 'Remover Usuário',
// text: 'Você tem certeza que quer remover o usuário?',
// icon: 'warning',
// showCancelButton: true,
// cancelButtonColor: '#FF6E6E',
// confirmButtonColor: '#7159c1',
// reverseButtons: true,
// confirmButtonText: 'Sim, remover usuário!',
// cancelButtonText: 'Cancelar',
// }).then(async result => {
// if (result.value) {
// await deletar(dev.github_user);
// Swal.fire('Removido!', 'Usuário removido com sucesso.', 'success');
// }
// });
// }
return (
<li className="dev-item">
<header>
<img src={dev.avatar_url} alt={dev.name} />
<div className="user-info">
<strong>{dev.name}</strong>
<span>{dev.techs.join(', ')}</span>
</div>
</header>
<p>{dev.bio}</p>
<div className="dev-buttons">
<a
id="github"
href={`https://github.com/${dev.github_user}`}
target="blank"
>
<button
title={`Check ${dev.name}'s Github`}
type="button"
>
<FaGithubAlt />
</button>
</a>
<button
className="map-button"
title={`See ${dev.name} in the map!`}
type="button"
onClick={() => {
alert('This feat is under construction for now!');
}}
>
<FaMapMarkedAlt />
</button>
<button
title={`Block ${dev.name}!`}
type="button"
onClick={() => {
alert('This feat is under construction for now!');
}}
>
<FaBan />
</button>
</div>
</li>
);
}
Example #3
| Source File: index.js From FinDevs with MIT License | 5 votes |
|
export default function SignInForm({ history }) {
const [gitUser, setGitUser] = useState('');
const [password, setPassword] = useState('');
async function handleSubmit(e) {
e.preventDefault();
try {
const response = await api.post('/login', {
github_user: gitUser,
password,
});
const { token } = response.data;
localStorage.setItem('findevs-token', token);
history.push('/app');
} catch (err) {
const { error: loginError } = err.response.data;
await Swal.fire({
title: `${loginError}`,
icon: 'error',
confirmButtonColor: '#7159c1',
});
}
}
return (
<Form onSubmit={handleSubmit}>
<img src={logo} alt="FinDevs" />
<Title>Sign in</Title>
<InputGroup>
<FaGithubAlt className="icon" />
<Input
placeholder="GitHub User"
name="gitUser"
value={gitUser}
required
onChange={(e) => setGitUser(e.target.value)}
/>
</InputGroup>
<InputGroup>
<FaLock className="icon" />
<Input
type="password"
placeholder="Password"
name="pass"
required
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</InputGroup>
<Button type="submit">SIGN IN</Button>
</Form>
);
}
Example #4
| Source File: Footer.js From Athavani with MIT License | 4 votes |
|
Footer = () => {
const scrollTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};
return (
<React.Fragment>
<footer className="footer">
<div className="footer-addr">
<h1 className="footer-logo">About Athavani</h1>
<div className="info">
Athavani/Memories is a place to save all your memories in a single
place and rejoice them through the years. We assures you that your
data will remain safe in Athavani.
</div>
</div>
<ul className="footer-nav">
<li className="social-box" style={{ width: "100%" }}>
<h2 className="title">Social</h2>
<ul className="ul-links">
<p
style={{
fontSize: "1.1rem",
margin: "0",
fontWeight: "600",
}}
>
Do follow us on social platforms
</p>
</ul>
<div className="col col">
<ul className="social">
<li>
<a href="#" rel="noopener noreferrer">
<div className="outer">
<FaTwitter
className="fab fa-twitter"
style={{ fontSize: "2.2em" }}
/>
</div>
</a>
</li>
<li>
<a
href="https://github.com/Tejas1510/Athavani"
target="_blank"
rel="noopener noreferrer"
>
<div className="outer">
<FaGithubAlt
className="fab fa-github"
style={{ fontSize: "2.2em" }}
/>
</div>
</a>
</li>
<li>
<a
href="https://discord.gg/gEqSYzc5Yu"
target="_blank"
rel="noopener noreferrer"
>
<div className="outer">
<FaDiscord
className="fab fa-discord"
style={{ fontSize: "2.2em" }}
/>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
<div className="footer-dash footer-dash-dark">
<div className="footer-text footer-text-dark">
<p style={{ margin: "10px 0px", fontWeight: "700" }}>
Copyright © Athavani 2021
</p>
</div>
</div>
</footer>
</React.Fragment>
);
}
Example #5
| Source File: index.js From FinDevs with MIT License | 4 votes |
|
export default function SignUpForm({ history }) {
const [gitUser, setGitUser] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [techs, setTechs] = useState([]);
const [latitude, setLatitude] = useState('');
const [longitude, setLongitude] = useState('');
useEffect(() => {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
setLatitude(latitude);
setLongitude(longitude);
},
(err) => {
console.log(err);
},
{
timeout: 30000,
},
);
}, []);
async function handleSubmit(e) {
e.preventDefault();
try {
if (confirmPassword !== password) {
setConfirmPassword('');
setPassword('');
throw 'Passwords does not match.';
}
if (password.length < 6) {
setConfirmPassword('');
setPassword('');
throw 'This password is too short! (min 6 characters)';
}
const newDev = await api.post('/devs', {
github_user: gitUser,
password,
techs,
latitude,
longitude,
});
history.push('/');
} catch (err) {
await Swal.fire({
title: err.response ? err.response.data.error : err,
icon: 'error',
confirmButtonColor: '#7159c1',
});
}
}
return (
<Form onSubmit={handleSubmit}>
<img src={logo} alt="FinDevs" />
<div className="input-block">
<label htmlFor="GitHub User">
<FaGithubAlt />
</label>
<input
name="github_user"
id="github_user"
placeholder="GitHub User"
required
onChange={(e) => {
setGitUser(e.target.value);
}}
/>
</div>
<div className="input-block">
<label htmlFor="password">
<FaKey />
</label>
<input
name="password"
id="password"
type="password"
placeholder="Password"
required
onChange={(e) => {
setPassword(e.target.value);
}}
value={password}
/>
<input
name="confirmPassword"
id="confirmPassword"
type="password"
placeholder="Confirm Password"
required
onChange={(e) => {
setConfirmPassword(e.target.value);
}}
value={confirmPassword}
/>
</div>
<div className="input-block">
<label htmlFor="techs">
<FaCode />
</label>
<input
name="techs"
id="techs"
placeholder="Your main Techs splited by comma"
required
onChange={(e) => {
setTechs(e.target.value);
}}
/>
</div>
<div className="input-group">
<div className="input-block">
<label htmlFor="location">
<FaCompass />
</label>
<input
name="Latitude"
type="number"
id="Latitude"
placeholder="Latitude"
value={latitude}
onChange={(e) => setLatitude(e.target.value)}
/>
<input
name="Longitude"
type="number"
id="Longitude"
placeholder="Longitude"
value={longitude}
onChange={(e) => setLongitude(e.target.value)}
/>
</div>
</div>
<button type="submit">New Dev</button>
</Form>
);
}
Example #6
| Source File: about-us.js From warsinhk with MIT License | 4 votes |
|
AboutUsPage = props => {
const { data } = props
const { t } = useTranslation()
const contributors = React.useMemo(
() =>
[]
.concat(data.configJson.credits.contributors)
.sort((a, b) => (a > b ? 1 : -1)),
[data.configJson.credits]
)
const volunteers = React.useMemo(
() =>
[]
.concat(data.configJson.credits.volunteers)
.sort((a, b) => (a.name > b.name ? 1 : -1)),
[data.configJson.credits.volunteers]
)
const designers = React.useMemo(
() =>
[]
.concat(data.configJson.credits.designers)
.sort((a, b) => (a.name > b.name ? 1 : -1)),
[data.configJson.credits.designers]
)
return (
<Layout>
<SEO title="AboutUsPage" />
<SplitWrapper>
<SessionWrapper>
<Typography variant="h2" style={{ marginBottom: 16 }}>
{t("about_us.title")}
</Typography>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.who_are_we_1") }}
/>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.who_are_we_2") }}
/>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.who_are_we_3") }}
/>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.donation") }}
/>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.who_are_we_4") }}
/>
<Button
style={{ marginTop: 8 }}
variant="outlined"
color="primary"
size="small"
startIcon={<FaFacebookF size="0.8rem" />}
href="https://www.facebook.com/vote4hongkong/"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "https://www.facebook.com/vote4hongkong/",
})
}}
>
{t("about_us.vote4hk_fb")}
</Button>
<Grid container spacing={2} style={{ marginTop: 16 }}>
<Grid item md={6}>
<Typography variant="h3" style={{ marginBottom: 8 }}>
{t("about_us.g0vhk_title")}
</Typography>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.g0vhk_1") }}
/>
{/* <Button
component="button"
variant="outlined"
color="primary"
size="small"
startIcon={mapIcon("attach_money")}
href="https://www.collaction.hk/s/g0vhk/fund"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "https://www.collaction.hk/s/g0vhk/fund",
})
}}
>
{t("about_us.donate_g0vhk")}
</Button> */}
</Grid>
<Grid item md={6}>
<Typography variant="h3" style={{ marginBottom: 8 }}>
{t("about_us.sooc_title")}
</Typography>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.sooc_1") }}
/>
{/* <Button
variant="outlined"
color="primary"
size="small"
startIcon={mapIcon("attach_money")}
href="https://www.collaction.hk/s/station/fund"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "https://www.collaction.hk/s/station/fund",
})
}}
>
{t("about_us.donate_sooc")}
</Button> */}
</Grid>
<Grid item xs={12}>
<Typography variant="h3" style={{ marginBottom: 8 }}>
{t("about_us.contact_title")}
</Typography>
<Paragraph
dangerouslySetInnerHTML={{
__html: t("about_us.contact_method"),
}}
/>
</Grid>
</Grid>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.open_source") }}
style={{ marginTop: 16 }}
/>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.citation") }}
style={{ marginTop: 16 }}
/>
<LinkBox>
<Button
variant="outlined"
color="primary"
size="small"
startIcon={<FaGithubAlt />}
href="https://github.com/nandiheath/warsinhk"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "https://github.com/nandiheath/warsinhk",
})
}}
>
{t("about_us.github")}
</Button>
<Button
variant="outlined"
color="secondary"
size="small"
startIcon={mapIcon("insert_drive_file")}
href="https://docs.google.com/spreadsheets/d/e/2PACX-1vT6aoKk3iHmotqb5_iHggKc_3uAA901xVzwsllmNoOpGgRZ8VAA3TSxK6XreKzg_AUQXIkVX5rqb0Mo/pub?gid=0&range=A2:ZZ&output=csv"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "high_risk_source_data",
})
}}
>
{t("about_us.high_risk")} 2020
</Button>
<Button
variant="outlined"
color="secondary"
size="small"
startIcon={mapIcon("insert_drive_file")}
href="https://docs.google.com/spreadsheets/d/e/2PACX-1vQVRg6iiYOHZwLsXdZE6TVWBO7Cldi07NUnbeVY3nI97_IjyG3jiWnjaUS51HRNJI1fN3io1paMa6jZ/pub?gid=0&range=A2:ZZ&output=csv"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "high_risk_source_data",
})
}}
>
{t("about_us.high_risk")} 2021
</Button>
<Button
variant="outlined"
color="secondary"
size="small"
startIcon={mapIcon("insert_drive_file")}
href="https://docs.google.com/spreadsheets/d/e/2PACX-1vTl_YWJy_osrNeOD0ufyQH4CuWTKCX9ng-tUPpIFXsAdk_ry2uciIt752f9a-yd83IGUtsw2rHQNB0s/pub?gid=0&range=A2:ZZ&output=csv"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "high_risk_source_data",
})
}}
>
{t("about_us.high_risk")} 2022
</Button>
<Button
variant="outlined"
color="secondary"
size="small"
startIcon={mapIcon("insert_drive_file")}
href="https://docs.google.com/spreadsheets/d/e/2PACX-1vSr2xYotDgnAq6bqm5Nkjq9voHBKzKNWH2zvTRx5LU0jnpccWykvEF8iB_0g7Tzo2pwzkTuM3ETlr_h/pub?gid=0&range=A2:ZZ&output=csv"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "wars_cases_source_data",
})
}}
>
{t("about_us.wars_cases")} 2020
</Button>
<Button
variant="outlined"
color="secondary"
size="small"
startIcon={mapIcon("insert_drive_file")}
href="https://docs.google.com/spreadsheets/d/e/2PACX-1vT-Xw-QHYydz_kJCJLBqTKGbb2OF8_gisdUsduPbdR6Dp3tLbWxy_mkfRx2tMmGJ0q64uNsLLv3bbfb/pub?gid=0&range=A2:ZZ&output=csv"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "wars_cases_source_data",
})
}}
>
{t("about_us.wars_cases")} 2021
</Button>
<Button
variant="outlined"
color="secondary"
size="small"
startIcon={mapIcon("insert_drive_file")}
href="https://docs.google.com/spreadsheets/d/e/2PACX-1vTEJyeLTOgntmUjeRhyEB1w_eFD6BUKAEgkR47pp3yXY_XB3IlF7DstsAA0pHz33h2pzGIxGbvGhjMe/pub?gid=0&range=A2:ZZ&output=csv"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "wars_cases_source_data",
})
}}
>
{t("about_us.wars_cases")} 2022
</Button>
</LinkBox>
</SessionWrapper>
<SessionWrapper>
<Typography variant="h2">{t("about_us.volunteers")}</Typography>
<Grid container spacing={1} style={{ marginTop: 8 }}>
{volunteers.map(item => (
<Grid item key={item.id} xs={6} md={4}>
<Volunteer
item={item}
siteUrl={data.site.siteMetadata.siteUrl}
/>
</Grid>
))}
</Grid>
<Typography variant="h2" style={{ marginTop: 16 }}>
{t("about_us.designers")}
</Typography>
<Grid container spacing={1} style={{ marginTop: 8 }}>
{designers.map(item => (
<Grid item key={item.id} xs={6} md={4}>
<Volunteer
item={item}
siteUrl={data.site.siteMetadata.siteUrl}
/>
</Grid>
))}
</Grid>
<Typography variant="h2" style={{ marginTop: 16 }}>
{t("about_us.contributors")}
</Typography>
<Grid container spacing={1} style={{ marginTop: 8 }}>
{contributors.map(item => (
<Grid item xs={6} md={4} key={item}>
<Contributor githubId={item} />
</Grid>
))}
</Grid>
</SessionWrapper>
</SplitWrapper>
</Layout>
)
}
