react-icons/fa#FaGithub JavaScript Examples
The following examples show how to use
react-icons/fa#FaGithub.
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: Header.js From coronavirus-map-dashboard with MIT License | 6 votes |
|
Header = () => {
return (
<header>
<Container type="content">
<h1>Coronavirus (COVID-19)</h1>
<ul>
<li>
<a href="https://github.com/colbyfayock/gatsby-starter-leaflet">Gatsby Starter Leaflet</a>
</li>
<li>
<a href="https://github.com/colbyfayock/coronavirus-map-dashboard">
<FaGithub /> Github
</a>
</li>
</ul>
</Container>
</header>
);
}
Example #2
| Source File: SocialIcons.js From caasy-nextjs-blog-template with MIT License | 6 votes |
|
SocialIcons = () => (
<div className={styling.social}>
<a href={blogConfig.social.youtube} target='_blank' rel='noreferrer' hidden={!blogConfig.social.youtube}>
<FaYoutube />
</a>
<a href={blogConfig.social.linkedin} target='_blank' rel='noreferrer' hidden={!blogConfig.social.linkedin}>
<FaLinkedin />
</a>
<a href={blogConfig.social.dev} target='_blank' rel='noreferrer' hidden={!blogConfig.social.dev}>
<FaDev />
</a>
<a href={blogConfig.social.facebook} target='_blank' rel='noreferrer' hidden={!blogConfig.social.facebook}>
<FaFacebook />
</a>
<a href={blogConfig.social.instagram} target='_blank' rel='noreferrer' hidden={!blogConfig.social.instagram}>
<FaInstagram />
</a>
<a href={blogConfig.social.twitter} target='_blank' rel='noreferrer' hidden={!blogConfig.social.twitter}>
<FaTwitter />
</a>
<a href={blogConfig.social.github} target='_blank' rel='noreferrer' hidden={!blogConfig.social.github}>
<FaGithub />
</a>
</div>
)
Example #3
| Source File: Footer.js From memeify with The Unlicense | 6 votes |
|
function Footer() {
return (
<div id="footer">
<div id="left">
<a href="https://twitter.com/jai_dewani">
<IconContext.Provider value={{color:"rgb(29, 161, 242)"}}>
<div><FaTwitter/></div>
</IconContext.Provider>
</a>
</div>
<div id="middle">
Made with <span role="img"aria-label="Red Heart" >❤️</span> by <a href="https://github.com/jai-dewani">Jai Kumar Dewani</a>
</div>
<div id="right">
<a href="https://github.com/jai-dewani/memeify">
<IconContext.Provider value={{color:"black"}}>
<div><FaGithub/></div>
</IconContext.Provider>
</a>
</div>
</div>
)
}
Example #4
| Source File: SocialIcon.js From portfolio-react with MIT License | 6 votes |
|
function SocialIcon() {
return (
<SocialDiv>
<ul>
<li className="item">
<a
href="https://www.linkedin.com/in/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaLinkedin />
</a>
</li>
<li className="item">
<a
href="https://github.com/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaGithub />
</a>
</li>
<li className="item">
<a
href="https://github.com/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaInstagram />
</a>
</li>
</ul>
</SocialDiv>
);
}
Example #5
| Source File: FixSocialIcon.js From portfolio-react with MIT License | 6 votes |
|
function FixSocialIcon() {
return (
<Social>
<ul>
<li className="item">
<a
href="https://www.linkedin.com/in/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaLinkedin />
</a>
</li>
<li className="item">
<a
href="https://github.com/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaGithub />
</a>
</li>
<li className="item">
<a
href="https://github.com/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaInstagram />
</a>
</li>
</ul>
</Social>
);
}
Example #6
| Source File: Project.js From devfolio with MIT License | 6 votes |
|
Project = ({ description, title, github, stack, url, image }) => {
return (
<article className="project">
{image && (
<Image fluid={image.childImageSharp.fluid} className="project-img" />
)}
<div className="project-info">
<h3>{title}</h3>
<p className="project-desc">{description}</p>
<div className="project-stack">
{stack.map((item) => {
return <span key={item.id}>{item.title}</span>;
})}
</div>
<div className="project-links">
<a
href={github}
rel="noopener noreferrer"
target="_blank"
aria-label="Github Link"
>
<FaGithub className="project-icon" />
</a>
<a
href={url}
rel="noopener noreferrer"
target="_blank"
aria-label="Project Link"
>
<FaExternalLinkAlt className="project-icon" />
</a>
</div>
</div>
</article>
);
}
Example #7
| Source File: Footer.jsx From realtime-chat-supabase-react with Apache License 2.0 | 6 votes |
|
export default function Footer() {
return (
<Box position="fixed" bottom="0" width="100%">
<MessageForm />
<Grid
gridTemplateColumns="auto 1fr"
textAlign="center"
alignItems="center"
py="4px"
px="30px"
height="40px"
bg="white"
>
<GridItem justifySelf="start">
{/* Built by{" "} */}
{/* <a href="http://shimon-wosner.vercel.app" target="_blank"> */}
<a
href="https://twitter.com/shwosner"
target="_blank"
rel="noreferrer"
>
<FaTwitter style={{ display: "inline" }} />
@shwosner
</a>
</GridItem>
<GridItem justifySelf="end">
<a
href="https://github.com/shwosner/realtime-chat-supabase-react"
target="_blank"
rel="noreferrer"
>
<FaGithub style={{ display: "inline" }} /> Source code
</a>
</GridItem>
</Grid>
</Box>
);
}
Example #8
| Source File: ContactMe.js From tuliofaria.dev with MIT License | 6 votes |
|
ContactMe = () => {
return (
<div className='mx-8 px-8 relative border-orange border rounded md:mx-0 md:px-16 pb-4 pt-10 mt-6'>
<h3 className='absolute bg-orange text-white py-2 px-6 top-0 -mt-5 text-2xl font-bold uppercase'>Contact me</h3>
<p className='text-center md:text-left'>
<a href='https://linkedin.com/in/tuliofaria' title='LinkedIn Profile'>
<FaLinkedin className='text-5xl md:text-6xl inline-block md:mr-6' />
</a>
<a href='https://github.com/tuliofaria' title='GitHub Profile'>
<FaGithub className='text-5xl md:text-6xl inline-block md:mr-6' />
</a>
<a href='https://youtube.com/devplenocom' title='Youtube Channel'>
<FaYoutube className='text-5xl md:text-6xl inline-block md:mr-6' />
</a>
<a href='https://devpleno.com' title='Blog'>
<FiLink className='text-5xl md:text-6xl inline-block' />
</a>
<br />
<span className='inline-block mt-4'>or drop a line: [email protected]</span>
</p>
</div>
)
}
Example #9
| Source File: index.js From relay_12 with MIT License | 6 votes |
|
function Footer() {
return (
<footer className="footer">
<a href="https://github.com/boostcamp-2020/relay_12">
<FaGithub /> Github
</a>
</footer>
);
}
Example #10
| Source File: index.js From js-docs with MIT License | 6 votes |
|
contributors = metadata.contributors.map(
({ name, url_git, url_linkedin, url_avatar }, index) => {
return (
<Box key={index}>
<BoxHeader
colorOne={generateOrangeColor()}
colorTwo={generateOrangeColor()}
>
<ImgContainer>
<img src={url_avatar} alt="Avatar" />
</ImgContainer>
</BoxHeader>
<BoxContent>
<Author>{name}</Author>
<Links>
<a href={url_git} target="_blank" rel="noopener noreferrer">
<FaGithub />
</a>
<a href={url_linkedin} target="_blank" rel="noopener noreferrer">
<FaLinkedin />
</a>
</Links>
</BoxContent>
</Box>
)
}
)
Example #11
| Source File: ProjectCard.js From Winter-of-Code-2.0-frontend with MIT License | 6 votes |
|
ProjectCard = (props) => {
const [showIdeas, setShow] = useState(false);
return (
<div className="Card" >
<div className="Project_name" style={{visibility: `${showIdeas ? 'hidden' : 'visible'}`, height: `${showIdeas ? '0' : '30'}%`}}>
{props.data.title}
</div>
<div className="Project_ideas" onClick={() => {
setShow(showIdeas ? false : true);
}}>
Check Ideas
<FaAngleDown style={{transition: "all ease-in-out 0.3s", marginLeft: "5px", transform: `rotateZ(${showIdeas ? '0' : '-90'}deg)`}}/>
</div>
<div className="Organizer_img" style={{height: `${showIdeas ? '0' : '50'}%`, backgroundImage: `url(${props.data.org_img})`}} >
</div>
<div className="Ideas" style={{visibility: `${showIdeas ? 'visible' : 'hidden'}`, height: `${showIdeas ? '290' : '0'}%`}}>
<div className="flex-container">
<a href={props.data.repo_link} className={props.data.tags.includes("remove")?"no_view":"git_hub"} target='_blank' rel='noreferrer'><FaGithub /></a>
</div>
<div>
{props.data.mentors.map((mentor, idx) => {
return (
<a className="mentors-flex" href= {"mailto:" + mentor.email} >
<FiMail style={{color: "white", cursor: "pointer", position: "relative", top: "2px"}} key={idx}></FiMail>
<div style={{color: "white", display: "inline", cursor: "pointer", paddingLeft: "5px"}}>{mentor.name}</div>
</a>
)
})}
</div>
{props.data.Ideas.map((idea, idx) => {
return (
<li style={{textAlign: "center", margin: "10px"}}>{idea}</li>
)
})}
</div>
</div>
)
}
Example #12
| Source File: Footer.js From Winter-of-Code-2.0-frontend with MIT License | 6 votes |
|
Footer = () => {
return (
<footer className="footer">
<div className="contact">
<a href="https://twitter.com/gdsciiitkalyani" target="_blank" rel="noreferrer" className="icon twitter"><FaTwitter size = '5x'/></a>
<a href="https://www.instagram.com/gdsciiitkalyani/" target="_blank" rel="noreferrer" className="icon instagram"><FaInstagram size = '5x'/></a>
<a href="https://www.linkedin.com/company/gdsc-iiit-kalyani/" target="_blank" rel="noreferrer" className="icon linkedin"><FaLinkedin size = '5x'/></a>
<a href="https://mail.google.com/" target="_blank" rel="noreferrer" className="icon email"><FaEnvelope size = '5x'/></a>
<a href="https://github.com/GDSC-IIIT-Kalyani" target="_blank" rel="noreferrer" className="icon github"><FaGithub size='5x'/></a>
</div>
<div className="copyright">
<h2><FaCopyright/> 2021-22 GDSC IIIT Kalyani</h2>
</div>
</footer>
);
}
Example #13
| Source File: project-icon.js From gatsby-theme-intro with MIT License | 6 votes |
|
ProjectIcon = ({ icon }) => (
<span className="absolute right-0 bottom-0 mb-5 mr-5 text-back">
{icon === "github" ? (
<FaGithub className="w-6 h-6" />
) : (
<FaCompass className="w-6 h-6" />
)}
</span>
)
Example #14
| Source File: meetup-post.js From codeursenseine.com with MIT License | 6 votes |
|
MeetupPost = ({ data }) => {
const { body, frontmatter, parent } = data.mdx;
return (
<MeetupLayout title={frontmatter.title}>
<Stack spacing={8}>
<A as={Link} to="/meetups">
Retour à la liste des meetups
</A>
<MeetupTitle metadata={frontmatter} />
<MeetupRegistration metadata={frontmatter} />
<Box>
<MDXRenderer>{body}</MDXRenderer>
</Box>
<MeetupRegistration metadata={frontmatter} />
<Button
variant="outline"
as="a"
href={`https://github.com/CodeursEnSeine/codeursenseine-new/edit/master/content/meetups/${parent.base}`}
leftIcon={<FaGithub />}
>
Modifier cette page
</Button>
</Stack>
</MeetupLayout>
);
}
Example #15
| Source File: social-icon.js From gatsby-theme-intro with MIT License | 6 votes |
|
SocialIcon = ({ name, ...params }) => {
const icons = {
behance: FaBehance,
dribbble: FaDribbble,
facebook: FaFacebook,
github: FaGithub,
goodreads: FaGoodreadsG,
medium: FaMediumM,
instagram: FaInstagram,
linkedin: FaLinkedinIn,
producthunt: FaProductHunt,
twitter: FaTwitter,
youtube: FaYoutube,
xing: FaXing,
}
const Icon = icons[name]
return Icon ? <Icon {...params} /> : null
}
Example #16
| Source File: Navbar.js From ytx-card-game with MIT License | 6 votes |
|
function Navbar() {
const [open, setOpen] = useState(false)
const [active, setActive] = useState(0)
const handleClick = e => {
const index = parseInt(e.target.id, 0);
if (index !== active) {
setActive(index);
}
};
return (
<Nav>
<Logo src={logo} />
<HamburgerMenu
isOpen={open}
menuClicked={() => setOpen(!open)}
width={24}
height={18}
strokeWidth={2}
rotate={0}
color='#fff'
borderRadius={0}
animationDuration={0.5}
/>
<NavMenu open={open}>
<Li onClick={handleClick} active={active === 0} id={0}>Home</Li>
<Li onClick={handleClick} active={active === 1} id={1}>NFT Minting dApp</Li>
<Li onClick={handleClick} active={active === 2} id={2}>YTX Card Game</Li>
<Li><FaDiscord size={27} color={"#a7a7a7"} /></Li>
<Li><FaGithub size={27} color={"#a7a7a7"} /></Li>
<Li><CgFileDocument size={27} color={"#a7a7a7"} /></Li>
<Li><a href="#!">Connect Wallet</a></Li>
</NavMenu>
</Nav>
)
}
Example #17
| Source File: index.js From react-portfolio with MIT License | 5 votes |
|
Socialicons = (params) => {
return (
<div className="stick_follow_icon">
<ul>
{socialprofils.twitter && (
<li>
<a href={socialprofils.twitter}>
<FaTwitter />
</a>
</li>
)}
{socialprofils.github && (
<li>
<a href={socialprofils.github}>
<FaGithub />
</a>
</li>
)}
{socialprofils.facebook && (
<li>
<a href={socialprofils.facebook}>
<FaFacebookF />
</a>
</li>
)}
{socialprofils.linkedin && (
<li>
<a href={socialprofils.linkedin}>
<FaLinkedin />
</a>
</li>
)}
{socialprofils.youtube && (
<li>
<a href={socialprofils.youtube}>
<FaYoutube />
</a>
</li>
)}
{socialprofils.twitch && (
<li>
<a href={socialprofils.twitch}>
<FaTwitch />
</a>
</li>
)}
</ul>
<p>Follow Me</p>
</div>
);
}
Example #18
| Source File: SpeakerCard.js From codeursenseine.com with MIT License | 5 votes |
|
SpeakerCard = ({ speaker }) => {
const {
name,
image: { publicURL },
company,
twitterLink,
githubLink,
} = speaker?.childMdx?.frontmatter;
const { body } = speaker?.childMdx;
return (
<Card borderLeftWidth={2} borderLeftColor="brand.600">
<Flex>
<Box mr={4}>
<AspectRatio ratio={1} w="6em" maxW="100%">
<Image src={publicURL} borderRadius={4} />
</AspectRatio>
</Box>
<Box>
<Heading fontSize="lg">{name}</Heading>
<Heading fontSize="md">{company}</Heading>
{twitterLink && (
<IconButton
as="a"
target="_blank"
href={twitterLink}
title={`${name} Twitter`}
icon={<FaTwitter />}
variant="ghost"
colorScheme="brand"
rel="noopener noreferrer"
/>
)}
{githubLink && (
<IconButton
as="a"
target="_blank"
href={githubLink}
title={`${name} Github`}
icon={<FaGithub />}
variant="ghost"
colorScheme="brand"
rel="noopener noreferrer"
/>
)}
</Box>
</Flex>
{body && (
<Box mt={4}>
<MDXRenderer mt={4}>{body}</MDXRenderer>
</Box>
)}
</Card>
);
}
Example #19
| Source File: Footer.js From covid19 with MIT License | 5 votes |
|
render() {
const { lang, fullMap, fullPlot, fullTree } = this.props
if (fullMap || fullPlot || fullTree) return <div />
return (
<Fragment>
<div className="footer">
<span>
<a href="https://yliu.io">Steven Liu</a> 2020
</span>
<FaInfoCircle
data-tip={!(isMobile || isIPad13) ? i18n.ABOUT[lang] : null}
size={18}
onClick={() => this.setState({ modal: true })}
/>
<FaGithub
data-tip={!(isMobile || isIPad13) ? i18n.SOURCE_CODE[lang] : null}
size={18}
onClick={() => window.open('https://github.com/stevenliuyi/covid19')}
/>
</div>
<Modal isOpen={this.state.modal} centered={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>{i18n.ABOUT[lang]}</ModalHeader>
<ModalBody className="footer-about">
<div dangerouslySetInnerHTML={{ __html: i18n.ABOUT_TEXT[lang] }} />
<a
className="bmc-button"
target="_blank"
href="https://www.buymeacoffee.com/stevenliuyi"
rel="noopener noreferrer"
>
<img
src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg"
alt="Buy me a coffee"
/>
<span style={{ marginLeft: 15, fontSize: 19 }}>Buy me a coffee</span>
</a>
</ModalBody>
</Modal>
</Fragment>
)
}
Example #20
| Source File: Header.jsx From realtime-chat-supabase-react with Apache License 2.0 | 5 votes |
|
export default function Header() {
const { username, setUsername, auth, randomUsername } = useAppContext();
return (
<Grid
templateColumns="max-content 1fr min-content"
justifyItems="center"
alignItems="center"
bg="white"
position="sticky"
top="0"
zIndex="10"
borderBottom="20px solid #edf2f7"
>
<GridItem justifySelf="start" m="2">
<Image src="/logo.png" height="30px" ml="2" />
</GridItem>
{auth.user() ? (
<>
<GridItem justifySelf="end" alignSelf="center" mr="4">
Welcome <strong>{username}</strong>
</GridItem>
<Button
marginRight="4"
size="sm"
variant="link"
onClick={() => {
const { error } = auth.signOut();
if (error) return console.error("error signOut", error);
const username = randomUsername();
setUsername(username);
localStorage.setItem("username", username);
}}
>
Log out
</Button>
</>
) : (
<>
<GridItem justifySelf="end" alignSelf="end">
<NameForm username={username} setUsername={setUsername} />
</GridItem>
<Button
size="sm"
marginRight="2"
colorScheme="teal"
rightIcon={<FaGithub />}
variant="outline"
onClick={() =>
auth.signIn({
provider: "github",
})
}
>
Login
</Button>
</>
)}
</Grid>
);
}
Example #21
| Source File: Home.jsx From CodeSignal-Practice_Solutions with MIT License | 5 votes |
|
export default function Home() {
const icons = [
{
href: "https://www.linkedin.com/in/sagnik-ghosh-564574199",
icon: <FaLinkedinIn />,
},
{
href: "https://github.com/sagnikghoshcr7",
icon: <FaGithub />,
},
{
href: "https://twitter.com/sagnikghoshcr7",
icon: <FaTwitter />,
},
{
href: "https://www.facebook.com/profile.php?id=100036939404474",
icon: <FaFacebookF />,
},
{
href: "https://www.instagram.com/sagnikghoshcr7",
icon: <FaInstagram />,
},
]
return (
<Section id="about">
<div className='row justify-content-between'>
<div className='col-md-6 order-last order-lg-first' data-aos='fade-up'>
<h1 className="mb-0">
Sagnik
<span className="text-primary" style={{paddingLeft: '2vw'}}>Ghosh</span>
</h1>
<div className="subheading mb-3">
<span style={{paddingRight: '0.3vw'}}>
Impossible is nothing!
</span>
<span style={{paddingRight: '0.3vw'}}>
·
</span>
<a href="mailto:[email protected]" className='home-mail'>
[email protected]
</a>
</div>
</div>
<div className='col-md-3 mb-5 mb-lg-0' data-aos='fade-up'>
<img
src={SGCartoon}
alt="Sagnik Cartoon"
style={{height: '40vh', width: '40vh'}}
/>
</div>
</div>
<p className="lead mb-4">
I am a third-year undergraduate Information Technology Student at KIIT University. I am amongst the top contributors in Github from India. I am an Full-Stack Intern at Kaglorsys & Flutter Developer Intern at Skillablers, presently leading the Microsoft Student Ambassadors Community KIIT. I am a Machine Learning Enthusiast also. My other interests are DevOps and UI/UX.
</p>
<div className="btn-group mb-5">
<button
className="btn btn-primary btn-custom py-2 px-5 CV-Button"
type="submit"
onClick={() => window.open(ResumePDF)}
>
Download CV
</button>
</div>
<div className="social-icons">
{icons.map(({ href, icon }, index) => (
<SocialIcon href={href} icon={icon} key={index} />
))}
</div>
</Section>
)
}
Example #22
| Source File: Navigation.js From portfolio-react with MIT License | 5 votes |
|
// import ResumeModal from "./ResumeModal";
function Navigation() {
const [showResumeModal, setShowResumeModal] = useState(false)
return (
<React.Fragment>
<Navbar variant='dark' expand='lg' fixed='top' className='nvabar-custon'>
<a href='/' className='navbar_logo_container'>
<img src={PortfolioLogo} className='navbar_logo' alt='navbar_logo' />
<span>Pranjal Jain</span>
</a>
<Navbar.Toggle aria-controls='basic-navbar-nav' />
<Navbar.Collapse id='basic-navbar-nav'>
<Nav className='mr-auto'></Nav>
<Nav className='navbar-right'>
<Nav.Link href='http://blog.pranjaljain.me'>
<Button className='moving-gradient'>Blogs</Button>
</Nav.Link>
<Nav.Link>
<Button
variant='light'
style={{
borderRadius: '4px 0 0 4px',
borderRight: '1px solid rgba(0,0,0,0.5)',
}}
onClick={() => {
setShowResumeModal(true)
}}>
Curriculum Vitae (CV)
</Button>
<Button
variant='light'
href='https://github.com/pranjaljain0/pranjaljain0/raw/master/Pranjal_Jain_CV.pdf'
style={{
borderRadius: '0 4px 4px 0',
}}
aria-label='Resume'>
<FaDownload
aria-label='Resume'
fill='rgba(0,0,0,0.5)'
onClick={() =>
(window.location =
'https://github.com/pranjaljain0/pranjaljain0/raw/master/Pranjal_Jain_CV.pdf')
}
/>
</Button>
</Nav.Link>
<Nav.Link
aria-label='Github'
href='https://github.com/pranjaljain0'>
<FaGithub
aria-label='Github'
color='rgba(255,255,255,0.8)'
size='1.5em'
/>
</Nav.Link>
<Nav.Link
aria-label='Linked In'
href='https://www.linkedin.com/in/pranjaljain0/'>
<FaLinkedin
aria-label='Linked In'
color='rgba(255,255,255,0.8)'
size='1.5em'
/>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<ResumeModal
showResumeModal={showResumeModal}
closeModal={() => {
setShowResumeModal(!showResumeModal)
}}
/>
</React.Fragment>
)
}
Example #23
| Source File: App.js From stake-nucypher with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
return <>
<StoreProvider>
<Router>
<Navbar expand="lg">
<Navbar.Brand href="#" className="mr-auto">
<div className="logo">
</div>
</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="/">Staking</Nav.Link>
<Nav.Link href="/worklock">Worklock</Nav.Link>
</Nav>
<div className="float-right h4 m-5">
<a href="https://github.com/cryptoseal86/stake-nucypher" target="_blank" rel="noopener noreferrer">
<FaGithub></FaGithub>
</a>
</div>
</Navbar>
<div className="App">
<Switch>
<Route exact path="/">
<div className="staker-container">
<Container>
<Tabs defaultActiveKey="stake" activeKey={this.state.key} className="tab-controls d-flex mx-auto" onSelect={this.handleSelectTab.bind(this)}>
<Tab eventKey="stake" title="Stake">
<StakerDashboard onTabChange={this.handleSelectTab.bind(this)}></StakerDashboard>
</Tab>
<Tab eventKey="withdraw" title="Withdraw">
<WithdrawDashboard></WithdrawDashboard>
</Tab>
<Tab eventKey="history" title="History">
<HistoryDashboard></HistoryDashboard>
</Tab>
</Tabs>
</Container>
</div>
</Route>
<Route path="/worklock">
<div className="staker-container">
<Container>
<WorkLockDashboard></WorkLockDashboard>
</Container>
</div>
</Route>
</Switch>
</div>
</Router>
</StoreProvider>
</>;
}
Example #24
| Source File: Container.jsx From Pathfinding-Visualizer with MIT License | 5 votes |
|
Container = () => {
const context = useContext(Context);
const { isPathExist, clear, isHelped, setIsHelped }: ContextType = context;
const [isErrorOpen, setIsErrorOpen] = useState(false);
useEffect(() => {
if (!isPathExist) {
clear();
setIsErrorOpen(true);
}
}, [isPathExist, clear]);
const onErrorClose = () => {
setIsErrorOpen(false);
};
const onHelpClose = () => {
setIsHelped(false);
};
return (
<>
<Helmet>
<title>Pathfinding Visualizer</title>
<meta property="og:title" content="Pathfinding Visualizer" />
<meta property="og:type" content="website" />
<meta
property="og:url"
content="https://baeharam.github.io/Pathfinding-Visualizer"
/>
<meta
property="og:image"
content="https://raw.githubusercontent.com/baeharam/Pathfinding-Visualizer/master/images/visualizer.gif"
/>
</Helmet>
<header className="header">
<h1 className="header__title">Pathfinding Visualizer</h1>
</header>
<ModalError isErrorOpen={isErrorOpen} onErrorClose={onErrorClose} />
<ModalInfo isHelped={isHelped} onHelpClose={onHelpClose} />
<Header />
<Board />
<footer className="footer">
<p className="footer__author">Made by Haram Bae</p>
<a
href="https://github.com/baeharam/Pathfinding-Visualizer"
target="_blank"
rel="noopener noreferrer"
>
<FaGithub className="footer__github" />
</a>
</footer>
</>
);
}
Example #25
| Source File: ProfileCard.js From Winter-of-Code-2.0-frontend with MIT License | 5 votes |
|
Card = ({ isHighlighted, name, image, role, socialMedia }) => {
return (
<div className={isHighlighted ? "active-card" : "card"}>
<div className="imgBx">
<img src={image} alt="profile pic of developer" />
</div>
<div className="content">
<div className="details">
<h2>
{name}
<br />
<span>{role}</span>
</h2>
<ul className="sci">
<li>
<a href={socialMedia.github} target="_blank" rel="noreferrer">
<FaGithub />
</a>
</li>
<li>
<a href={socialMedia.twitter} target="_blank" rel="noreferrer">
<FaTwitter />
</a>
</li>
<li>
<a href={socialMedia.linkedin} target="_blank" rel="noreferrer">
<FaLinkedin />
</a>
</li>
<li>
<a href={socialMedia.instagram} target="_blank" rel="noreferrer">
<FaInstagram />
</a>
</li>
</ul>
</div>
</div>
</div>
);
}
Example #26
| Source File: NavSocial.js From codeursenseine.com with MIT License | 5 votes |
|
socialLinks = [
{
name: "Twitter",
icon: <FaTwitter />,
link: "http://twitter.com/codeursenseine",
},
{
name: "Youtube",
icon: <FaYoutube />,
link: "https://www.youtube.com/channel/UCWujmG5rANxJI0nHbMFs08w/playlists",
},
{
name: "Twitch",
icon: <FaTwitch />,
link: "https://www.twitch.tv/codeursenseine/",
},
{
name: "GitHub",
icon: <FaGithub />,
link: "https://github.com/CodeursEnSeine/",
},
{
name: "Facebook",
icon: <FaFacebook />,
link: "https://www.facebook.com/codeursenseine",
},
{
name: "Linkedin",
icon: <FaLinkedin />,
link: "https://www.linkedin.com/company/codeurs-en-seine",
},
{
name: "Slack",
icon: <FaSlack />,
link: "https://go.codeursenseine.com/slack",
},
{
name: "Flux RSS",
icon: <FaRss />,
link: "https://www.spreaker.com/show/3365517/episodes/feed",
},
{
name: "Spotify",
icon: <FaSpotify />,
link: "https://open.spotify.com/show/28UM8IYvMF68hMm0IqO0M3",
},
{
name: "iTunes",
icon: <FaItunesNote />,
link:
"https://itunes.apple.com/fr/podcast/codeurs-en-seine/id1454150414?mt=2",
},
]
Example #27
| Source File: Landing.js From developer-portfolio with Apache License 2.0 | 4 votes |
|
function Landing() {
const { theme, drawerOpen } = useContext(ThemeContext);
const useStyles = makeStyles((t) => ({
resumeBtn: {
color: theme.primary,
borderRadius: '30px',
textTransform: 'inherit',
textDecoration: 'none',
width: '150px',
fontSize: '1rem',
fontWeight: '500',
height: '50px',
fontFamily: 'var(--primaryFont)',
border: `3px solid ${theme.primary}`,
transition: '100ms ease-out',
'&:hover': {
backgroundColor: theme.tertiary,
color: theme.secondary,
border: `3px solid ${theme.tertiary}`,
},
[t.breakpoints.down('sm')]: {
width: '180px',
},
},
contactBtn: {
backgroundColor: theme.primary,
color: theme.secondary,
borderRadius: '30px',
textTransform: 'inherit',
textDecoration: 'none',
width: '150px',
height: '50px',
fontSize: '1rem',
fontWeight: '500',
fontFamily: 'var(--primaryFont)',
border: `3px solid ${theme.primary}`,
transition: '100ms ease-out',
'&:hover': {
backgroundColor: theme.secondary,
color: theme.tertiary,
border: `3px solid ${theme.tertiary}`,
},
[t.breakpoints.down('sm')]: {
display: 'none',
},
},
}));
const classes = useStyles();
return (
<div className='landing'>
<div className='landing--container'>
<div
className='landing--container-left'
style={{ backgroundColor: theme.primary }}
>
<div className='lcl--content'>
{socialsData.linkedIn && (
<a
href={socialsData.linkedIn}
target='_blank'
rel='noreferrer'
>
<FaLinkedin
className='landing--social'
style={{ color: theme.secondary }}
aria-label='LinkedIn'
/>
</a>
)}
{socialsData.github && (
<a
href={socialsData.github}
target='_blank'
rel='noreferrer'
>
<FaGithub
className='landing--social'
style={{ color: theme.secondary }}
aria-label='GitHub'
/>
</a>
)}
{socialsData.twitter && (
<a
href={socialsData.twitter}
target='_blank'
rel='noreferrer'
>
<FaTwitter
className='landing--social'
style={{ color: theme.secondary }}
aria-label='Twitter'
/>
</a>
)}
{socialsData.youtube && (
<a
href={socialsData.youtube}
target='_blank'
rel='noreferrer'
>
<FaYoutube
className='landing--social'
style={{ color: theme.secondary }}
aria-label='YouTube'
/>
</a>
)}
{socialsData.blogger && (
<a
href={socialsData.blogger}
target='_blank'
rel='noreferrer'
>
<FaBlogger
className='landing--social'
style={{ color: theme.secondary }}
aria-label='Blogger'
/>
</a>
)}
</div>
</div>
<img
src={headerData.image}
alt=''
className='landing--img'
style={{
opacity: `${drawerOpen ? '0' : '1'}`,
borderColor: theme.secondary,
}}
/>
<div
className='landing--container-right'
style={{ backgroundColor: theme.secondary }}
>
<div
className='lcr--content'
style={{ color: theme.tertiary }}
>
<h6>{headerData.title}</h6>
<h1>{headerData.name}</h1>
<p>{headerData.desciption}</p>
<div className='lcr-buttonContainer'>
{headerData.resumePdf && (
<a
href={headerData.resumePdf}
download='resume'
target='_blank'
rel='noreferrer'
>
<Button className={classes.resumeBtn}>
Download CV
</Button>
</a>
)}
<NavLink
to='/#contacts'
smooth={true}
spy='true'
duration={2000}
>
<Button className={classes.contactBtn}>
Contact
</Button>
</NavLink>
</div>
</div>
</div>
</div>
</div>
);
}
Example #28
| Source File: Contacts.js From developer-portfolio with Apache License 2.0 | 4 votes |
|
function Contacts() {
const [open, setOpen] = useState(false);
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const [success, setSuccess] = useState(false);
const [errMsg, setErrMsg] = useState('');
const { theme } = useContext(ThemeContext);
const handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setOpen(false);
};
const useStyles = makeStyles((t) => ({
input: {
border: `4px solid ${theme.primary80}`,
backgroundColor: `${theme.secondary}`,
color: `${theme.tertiary}`,
fontFamily: 'var(--primaryFont)',
fontWeight: 500,
transition: 'border 0.2s ease-in-out',
'&:focus': {
border: `4px solid ${theme.primary600}`,
},
},
message: {
border: `4px solid ${theme.primary80}`,
backgroundColor: `${theme.secondary}`,
color: `${theme.tertiary}`,
fontFamily: 'var(--primaryFont)',
fontWeight: 500,
transition: 'border 0.2s ease-in-out',
'&:focus': {
border: `4px solid ${theme.primary600}`,
},
},
label: {
backgroundColor: `${theme.secondary}`,
color: `${theme.primary}`,
fontFamily: 'var(--primaryFont)',
fontWeight: 600,
fontSize: '0.9rem',
padding: '0 5px',
transform: 'translate(25px,50%)',
display: 'inline-flex',
},
socialIcon: {
width: '45px',
height: '45px',
borderRadius: '50%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '21px',
backgroundColor: theme.primary,
color: theme.secondary,
transition: '250ms ease-in-out',
'&:hover': {
transform: 'scale(1.1)',
color: theme.secondary,
backgroundColor: theme.tertiary,
},
},
detailsIcon: {
backgroundColor: theme.primary,
color: theme.secondary,
borderRadius: '50%',
width: '45px',
height: '45px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '23px',
transition: '250ms ease-in-out',
flexShrink: 0,
'&:hover': {
transform: 'scale(1.1)',
color: theme.secondary,
backgroundColor: theme.tertiary,
},
},
submitBtn: {
backgroundColor: theme.primary,
color: theme.secondary,
transition: '250ms ease-in-out',
'&:hover': {
transform: 'scale(1.08)',
color: theme.secondary,
backgroundColor: theme.tertiary,
},
},
}));
const classes = useStyles();
const handleContactForm = (e) => {
e.preventDefault();
if (name && email && message) {
if (isEmail(email)) {
const responseData = {
name: name,
email: email,
message: message,
};
axios.post(contactsData.sheetAPI, responseData).then((res) => {
console.log('success');
setSuccess(true);
setErrMsg('');
setName('');
setEmail('');
setMessage('');
setOpen(false);
});
} else {
setErrMsg('Invalid email');
setOpen(true);
}
} else {
setErrMsg('Enter all the fields');
setOpen(true);
}
};
return (
<div
className='contacts'
id='contacts'
style={{ backgroundColor: theme.secondary }}
>
<div className='contacts--container'>
<h1 style={{ color: theme.primary }}>Contacts</h1>
<div className='contacts-body'>
<div className='contacts-form'>
<form onSubmit={handleContactForm}>
<div className='input-container'>
<label htmlFor='Name' className={classes.label}>
Name
</label>
<input
placeholder='John Doe'
value={name}
onChange={(e) => setName(e.target.value)}
type='text'
name='Name'
className={`form-input ${classes.input}`}
/>
</div>
<div className='input-container'>
<label
htmlFor='Email'
className={classes.label}
>
Email
</label>
<input
placeholder='[email protected]'
value={email}
onChange={(e) => setEmail(e.target.value)}
type='email'
name='Email'
className={`form-input ${classes.input}`}
/>
</div>
<div className='input-container'>
<label
htmlFor='Message'
className={classes.label}
>
Message
</label>
<textarea
placeholder='Type your message....'
value={message}
onChange={(e) => setMessage(e.target.value)}
type='text'
name='Message'
className={`form-message ${classes.message}`}
/>
</div>
<div className='submit-btn'>
<button
type='submit'
className={classes.submitBtn}
>
<p>{!success ? 'Send' : 'Sent'}</p>
<div className='submit-icon'>
<AiOutlineSend
className='send-icon'
style={{
animation: !success
? 'initial'
: 'fly 0.8s linear both',
position: success
? 'absolute'
: 'initial',
}}
/>
<AiOutlineCheckCircle
className='success-icon'
style={{
display: !success
? 'none'
: 'inline-flex',
opacity: !success ? '0' : '1',
}}
/>
</div>
</button>
</div>
</form>
<Snackbar
anchorOrigin={{
vertical: 'top',
horizontal: 'center',
}}
open={open}
autoHideDuration={4000}
onClose={handleClose}
>
<SnackbarContent
action={
<React.Fragment>
<IconButton
size='small'
aria-label='close'
color='inherit'
onClick={handleClose}
>
<CloseIcon fontSize='small' />
</IconButton>
</React.Fragment>
}
style={{
backgroundColor: theme.primary,
color: theme.secondary,
fontFamily: 'var(--primaryFont)',
}}
message={errMsg}
/>
</Snackbar>
</div>
<div className='contacts-details'>
<a
href={`mailto:${contactsData.email}`}
className='personal-details'
>
<div className={classes.detailsIcon}>
<FiAtSign />
</div>
<p style={{ color: theme.tertiary }}>
{contactsData.email}
</p>
</a>
<a
href={`tel:${contactsData.phone}`}
className='personal-details'
>
<div className={classes.detailsIcon}>
<FiPhone />
</div>
<p style={{ color: theme.tertiary }}>
{contactsData.phone}
</p>
</a>
<div className='personal-details'>
<div className={classes.detailsIcon}>
<HiOutlineLocationMarker />
</div>
<p style={{ color: theme.tertiary }}>
{contactsData.address}
</p>
</div>
<div className='socialmedia-icons'>
{socialsData.twitter && (
<a
href={socialsData.twitter}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaTwitter aria-label='Twitter' />
</a>
)}
{socialsData.github && (
<a
href={socialsData.github}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaGithub aria-label='GitHub' />
</a>
)}
{socialsData.linkedIn && (
<a
href={socialsData.linkedIn}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaLinkedinIn aria-label='LinkedIn' />
</a>
)}
{socialsData.instagram && (
<a
href={socialsData.instagram}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaInstagram aria-label='Instagram' />
</a>
)}
{socialsData.medium && (
<a
href={socialsData.medium}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaMediumM aria-label='Medium' />
</a>
)}
{socialsData.blogger && (
<a
href={socialsData.blogger}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaBloggerB aria-label='Blogger' />
</a>
)}
{socialsData.youtube && (
<a
href={socialsData.youtube}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaYoutube aria-label='YouTube' />
</a>
)}
{socialsData.reddit && (
<a
href={socialsData.reddit}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaRedditAlien aria-label='Reddit' />
</a>
)}
{socialsData.stackOverflow && (
<a
href={socialsData.stackOverflow}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaStackOverflow aria-label='Stack Overflow' />
</a>
)}
{socialsData.codepen && (
<a
href={socialsData.codepen}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaCodepen aria-label='CodePen' />
</a>
)}
{socialsData.gitlab && (
<a
href={socialsData.gitlab}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaGitlab aria-label='GitLab' />
</a>
)}
</div>
</div>
</div>
</div>
<img
src={theme.contactsimg}
alt='contacts'
className='contacts--img'
/>
</div>
);
}
Example #29
| Source File: Learn.js From CS-Hut with MIT License | 4 votes |
|
function Learn(props) {
console.log(props.content.courses);
return (
<motion.div
initial={{ scaleY: 0 }}
animate={{ scaleY: 1 }}
transition={{ duration: 0.5 }}
>
<div className="learn">
<div classNameName="headings">{props.name}</div>
<div className="container">
<motion.div
exit="out"
animate="in"
initial="out"
transition={{ delay: 0.5 }}
variants={pageTransition}
className="card"
>
<h3 className="title">Youtube</h3>
<div className="bar">
<div className="emptybar"></div>
<div className="filledbar"></div>
</div>
<ul>
{props.content.youtube.map((link, i) => (
<li>
<a
style={{ color: "white" }}
href={link}
target="_blank"
rel="noopener noreferrer"
>
<FaYoutube
size={20}
style={{ fill: "white", marginRight: "1vw" }}
/>
Watch
</a>
</li>
))}
</ul>
</motion.div>
<motion.div
exit="out"
animate="in"
initial="out"
variants={pageTransition}
transition={{ delay: 0.5 }}
className="card"
>
<h3 className="title">Websites</h3>
<div className="bar">
<div className="emptybar"></div>
<div className="filledbar"></div>
</div>
<ul>
{props.content.websites.map((link, i) => (
<li>
<a
style={{ color: "white" }}
href={link}
target="_blank"
rel="noopener noreferrer"
>
<MdBookmark
size={20}
style={{ fill: "white", marginRight: "1vw" }}
/>
Open
</a>
</li>
))}
</ul>
</motion.div>
<div className="card">
<h3 className="title">Courses</h3>
<div className="bar">
<div className="emptybar"></div>
<div className="filledbar"></div>
</div>
<ul>
{props.content.courses.map((link, i) => (
<li>
<a
style={{ color: "white" }}
href={link}
target="_blank"
rel="noopener noreferrer"
>
<FaBookOpen
size={20}
style={{ fill: "white", marginRight: "1vw" }}
/>
Learn
</a>
</li>
))}
</ul>
</div>
<motion.div
className="card"
variants={pageTransition2}
initial="out"
transition={{ delay: 0.5 }}
animate="in"
exit="out"
>
<h3 className="title">Tips/Tricks</h3>
<div className="bar">
<div className="emptybar"></div>
<div className="filledbar"></div>
</div>
<ul>
{props.content.tips.map((link, i) => (
<li>
<a
style={{ color: "white" }}
href={link}
target="_blank"
rel="noreferrer"
>
<FaLightbulb
size={20}
style={{ fill: "white", marginRight: "1vw" }}
/>
Tips
</a>
</li>
))}
</ul>
</motion.div>
<motion.div
className="card"
variants={pageTransition2}
initial="out"
transition={{ delay: 0.5 }}
animate="in"
exit="out"
>
<h3 className="title">Github</h3>
<div className="bar">
<div className="emptybar"></div>
<div className="filledbar"></div>
</div>
<ul>
{props.content.github.map((link, i) => (
<li>
<a
style={{ color: "white" }}
href={link}
target="_blank"
rel="noreferrer"
>
<FaGithub
size={20}
style={{ fill: "white", marginRight: "1vw" }}
/>
Clone
</a>
</li>
))}
</ul>
</motion.div>
</div>
</div>
</motion.div>
);
}
