react-icons/fa#FaYoutube JavaScript Examples
The following examples show how to use
react-icons/fa#FaYoutube.
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: 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 #2
| 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 #3
| 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 #4
| 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 #5
| Source File: Header.jsx From emprezzo with MIT License | 5 votes |
|
Header = ({ children, title, date, subtitle, cover, socialDetails, likeEnabled }) => (
<Wrapper>
<Helmet>
<script src="//w.likebtn.com/js/w/widget.js"></script>
</Helmet>
{cover && typeof cover === 'object' &&
<Img fluid={cover || {} || [] || ''} />
}
{cover && typeof cover === 'string' &&
<img src={cover || {} || [] || ''} style={{ width: '100%', objectFit: 'fill', objectPosition: '50% 50%' }} />
}
<Text>
{likeEnabled &&
<img src={likeEnabled.storeProfileImage} title={title} alt={title} style={{ 'margin-top': '4rem', 'max-height': '80px', 'textAlign': 'center', 'borderRadius': '0%' }} />
}
{likeEnabled &&
<span
className="likebtn-wrapper"
data-theme="custom"
data-icon_l="str1-o"
data-icon_d="sgn9-f"
data-icon_l_c="rgb(55,24,71)"
data-icon_l_c_v="rgb(192,76,253)"
data-icon_d_c="rgb(55,24,71)"
data-icon_d_c_v="rgba(253,76,97,0.88)"
data-bg_c="#ffffff"
data-bg_c_v="#ffffff"
data-f_family="Courier New"
data-i18n_like="favorite"
data-ef_voting="bounce"
data-white_label="true"
data-rich_snippet="true"
data-identifier={likeEnabled.storeName}
data-counter_count="true"
data-popup_disabled="true"
data-share_enabled="false"
data-addthis_pubid="ra-5f7b9ff19ad7a3f6"
data-item_url={likeEnabled.storeURL}
data-item_title={likeEnabled.storeName}
data-item_image={likeEnabled.storeProfileImage}
data-lazy_load="false"
data-tooltip_enabled="false"
data-site_id="5f795f90943ec9bf477cbfbe"
>
</span>
}
<h3 style={{ 'margin-bottom': '0.5rem'}}>{title}</h3>
<h4>{subtitle}</h4>
{socialDetails &&
<SocialIcons>
{socialDetails.InstagramLink &&
<a href={socialDetails.InstagramLink} target="_blank"><FaInstagram size="32" color="black" /></a>
}
{socialDetails.FacebookLink &&
<a href={socialDetails.FacebookLink} target="_blank"><FaFacebookSquare size="32" color="black" /></a>
}
{socialDetails.PinterestLink &&
<a href={socialDetails.PinterestLink} target="_blank"><FaPinterestSquare size="32" color="black" /></a>
}
{socialDetails.TwitterLink &&
<a href={socialDetails.TwitterLink} target="_blank"><FaTwitterSquare size="32" color="black" /></a>
}
{socialDetails.YouTubeLink &&
<a href={socialDetails.YouTubeLink} target="_blank"><FaYoutube size="32" color="black" /></a>
}
</SocialIcons>
}
{children && <Subtitle dangerouslySetInnerHTML={{ __html: children }} />}
</Text>
</Wrapper>
)
Example #6
| Source File: Footer.js From dscmec-website with MIT License | 5 votes |
|
function Footer() {
return (
<div className="footer">
<img className="footer-background" src={footerBackground} alt="" />
<div className="footer-container">
<div className="footer-icons">
<a
href="https://www.instagram.com/dscmec/"
target="_blank"
rel="noreferrer noopener"
>
<FaInstagram className="f-icon" />
</a>
<a
href="https://www.youtube.com/channel/UC3sLPfRwlw6ytRtYT91XKWQ/featured"
target="_blank"
rel="noreferrer noopener"
>
<FaYoutube className="f-icon" />
</a>
<a
href="https://twitter.com/dsc_mec"
target="_blank"
rel="noreferrer noopener"
>
<FaTwitter className="f-icon" />
</a>
<a
href="https://www.linkedin.com/showcase/dscmec/"
target="_blank"
rel="noreferrer noopener"
>
<FaLinkedinIn className="f-icon" />
</a>
</div>
<div className="footer-copyright">
©
<div>
<img src={logo} className="footer-logo" alt="" />
</div>
Developer Student Clubs MEC {new Date().getFullYear()}
</div>
</div>
</div>
);
}
Example #7
| 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 #8
| Source File: footer.js From next-ecommerce with MIT License | 4 votes |
|
export default function Fotter() {
return (
<footer>
<div className="footer footer-top">
<Logo />
<div className="footer-nav">
<Link href="/">
<a>Shop</a>
</Link>
<Link href="/">
<a>Journal</a>
</Link>
<Link href="/">
<a>About</a>
</Link>
<Link href="/">
<a>Contacts</a>
</Link>
</div>
<div className="social-links">
<Link href="/">
<a>
<FaFacebookF color="#d8d8d8" size="18px" />
</a>
</Link>
<Link href="/">
<a>
<FaTwitter color="#d8d8d8" size="18px" />
</a>
</Link>
<Link href="/">
<a>
<FaInstagram color="#d8d8d8" size="18px" />
</a>
</Link>
<Link href="/">
<a>
<FaYoutube color="#d8d8d8" size="18px" />
</a>
</Link>
</div>
</div>
<div className="footer footer-bottom">
<div className="texts">
<p>© 2016. Quantum UI kit</p>
<p>Privacy Policy</p>
<p>Terms of Use</p>
</div>
<div className="payment-info">
<p className="text">Accepted payment methods</p>
<div className="payment-methods">
<div>
<FaCcVisa color="#424242" size="32px" />
</div>
<div>
<FaCcMastercard color="#424242" size="32px" />
</div>
<div>
<FaCcPaypal color="#424242" size="32px" />
</div>
<div>
<FaCcAmazonPay color="#424242" size="32px" />
</div>
</div>
</div>
</div>
<style jsx>{`
footer {
width: 100vw;
display: flex;
flex-direction: column;
margin-top: 30px;
background-color: #ffffff;
box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.05);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
overflow-x: hidden;
}
.footer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 28px 10vw;
}
.footer-top .footer-nav {
display: flex;
align-items: center;
}
.footer-top .footer-nav a {
font-style: normal;
font-weight: 500;
font-size: 16px;
color: #666666;
text-decoration: none;
margin-left: 18px;
margin-right: 18px;
}
.footer-top .footer-nav a:hover {
text-decoration: underline;
}
.footer-top .social-links a {
margin-left: 12px;
margin-right: 12px;
}
/* Footer Bottom */
.footer-bottom {
border-top: 2px solid #f5f5f5;
}
.footer-bottom .texts {
display: flex;
flex-direction: row;
align-items: center;
}
.footer-bottom .texts p {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 60px;
color: #b3b3b3;
margin-right: 15px;
margin-left: 15px;
}
.footer-bottom .payment-info {
display: flex;
flex-direction: row;
align-items: center;
}
.footer-bottom .payment-info .text {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 60px;
color: #b3b3b3;
}
.footer-bottom .payment-info .payment-methods {
display: flex;
flex-direction: row;
margin-left: 12px;
}
.footer-bottom .payment-info .payment-methods div {
margin-left: 5px;
margin-right: 5px;
}
@media (max-width: 1000px) {
.footer-top .footer-nav {
display: none;
}
.footer-bottom {
display: flex;
flex-direction: column;
}
.footer-bottom .texts {
flex-direction: column;
}
.footer-bottom .texts p {
line-height: 40px;
}
.footer-bottom .payment-info .text {
display: none;
}
.footer-bottom .payment-info {
margin-top: 24px;
}
}
@media (max-width: 700px) {
.footer-top {
display: flex;
flex-direction: column;
}
.footer-top .social-links {
margin-top: 8px;
}
}
`}</style>
</footer>
);
}
Example #9
| 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 #10
| 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 #11
| Source File: index.js From cardano-documentation with MIT License | 4 votes |
|
Footer = ({ theme }) => {
const content = data.content
let logoURL = 'https://ucarecdn.com/75b74f03-ff04-47ba-821c-5e477d3d46d4/'
return (
<FooterSection theme={theme}>
<TopRow>
<Copyright>
<div>
<p>© IOHK 2015 - {new Date().getFullYear()}</p>
</div>
<div>
<Link
rel="noopener"
title="Input Output HK GitHub"
href="https://github.com/input-output-hk"
>
<DiGithubBadge size={25} />
</Link>
</div>
</Copyright>
<TopRight>
<Logo>
<Link
rel="noopener"
href="https://iohk.io/"
title="Input Output HK"
>
<div>
<Image
src={logoURL}
alt="IOHK logo"
sizeFactor={0.14}
maintainTransparency
/>
</div>
<div>
<p>IOHK supported project</p>
</div>
</Link>
</Logo>
<SocialLinks>
<SocialLink>
<Link
title="Input Output HK Twitter"
rel="noopener"
href="https://twitter.com/inputoutputHK"
>
<FaTwitter size={20} />
</Link>
</SocialLink>
<SocialLink>
<Link
title="Input Output HK Facebook"
rel="noopener"
href="https://www.facebook.com/iohk.io/"
>
<FaFacebookF size={20} />
</Link>
</SocialLink>
<SocialLink>
<Link
title="Input Output HK YouTube"
rel="noopener"
href="https://www.youtube.com/c/IohkIo"
>
<FaYoutube size={20} />
</Link>
</SocialLink>
<SocialLink>
<Link
title="Input Output HK Blog"
rel="noopener"
href="https://iohk.io/blog/"
>
<FaRss size={20} />
</Link>
</SocialLink>
</SocialLinks>
</TopRight>
</TopRow>
<hr />
<BottomRow>
<div style={{ marginBottom: '1rem' }}>
<img src={logo} alt="Cardano Logo" style={{ marginBottom: '1rem' }} />
<Markdown source={content.body} />
</div>
<div>
<LinksColumn>
<p>
<strong>{content.cardanoLinks.title}</strong>
</p>
<ul>
{content.cardanoLinks.links.map(({ href, label }) => (
<li key={`${href}_${label}`}>
<Link href={href} rel="noopener">
{label}
</Link>
</li>
))}
</ul>
</LinksColumn>
<LinksColumn>
<p>
<strong>{content.communityLinks.title}</strong>
</p>
<ul>
{content.communityLinks.links.map(({ href, label }) => (
<li key={`${href}_${label}`}>
<Link href={href} rel="noopener">
{label}
</Link>
</li>
))}
</ul>
</LinksColumn>
</div>
</BottomRow>
</FooterSection>
)
}
Example #12
| 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>
);
}
Example #13
| Source File: Footer.js From plataforma-sabia with MIT License | 4 votes |
|
Footer = ({ isAbout }) => (
<StyledFooter>
<FooterHeader>
<FooterHeaderContainer>
<FooterText>Siga o sabiá por onde ele for!</FooterText>
<FooterIconsList>
<FooterIconsListItem>
<a
href={socialMediaPages.facebook}
target="_blank"
rel="noopener noreferrer"
>
<FaFacebookF />
</a>
</FooterIconsListItem>
<FooterIconsListItem>
<a
href={socialMediaPages.twitter}
target="_blank"
rel="noopener noreferrer"
>
<FaTwitter />
</a>
</FooterIconsListItem>
<FooterIconsListItem>
<a
href={socialMediaPages.instagram}
target="_blank"
rel="noopener noreferrer"
>
<FaInstagram />
</a>
</FooterIconsListItem>
<FooterIconsListItem>
<a
href={socialMediaPages.linkedIn}
target="_blank"
rel="noopener noreferrer"
>
<FaLinkedin />
</a>
</FooterIconsListItem>
<FooterIconsListItem>
<a
href={socialMediaPages.youtube}
target="_blank"
rel="noopener noreferrer"
>
<FaYoutube />
</a>
</FooterIconsListItem>
</FooterIconsList>
</FooterHeaderContainer>
</FooterHeader>
<SiteInfo>
<SiteInfoContainer>
<div>
<Link href={internalPages.home}>
<img src="/logo-footer.svg" alt="Logo da Plataforma Sabiá" />
</Link>
</div>
<div>
<SiteInfoListTitle>Plataforma</SiteInfoListTitle>
<ul>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.intro
: `${landingPage.url}${landingPage.intro}`
}
>
O que é?
</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.about
: `${landingPage.url}${landingPage.about}`
}
>
Quem somos
</Link>
</SiteInfoListItem>
</ul>
</div>
<div>
<SiteInfoListTitle>Funcionalidades</SiteInfoListTitle>
<ul>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.features
: `${landingPage.url}${landingPage.features}`
}
>
Para Inventores
</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.features
: `${landingPage.url}${landingPage.features}`
}
>
Para a Sociedade
</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.features
: `${landingPage.url}${landingPage.features}`
}
>
Para Financiadores
</Link>
</SiteInfoListItem>
</ul>
</div>
<div>
<SiteInfoListTitle>Recursos</SiteInfoListTitle>
<ul>
<SiteInfoListItem>
<Link
href={socialMediaPages.podcast}
target="_blank"
rel="noopener noreferrer"
>
Podcasts
</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link href={socialMediaPages.courses}>Cursos</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link
href={socialMediaPages.blog}
target="_blank"
rel="noopener noreferrer"
>
Blog
</Link>
</SiteInfoListItem>
{/* <SiteInfoListItem>
<Link href={internalPages.ideas}>Banco de Ideias</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link href={internalPages.announcements}>Banco de Editais</Link>
</SiteInfoListItem> */}
<SiteInfoListItem>
<Link href={internalPages.showcase}>Vitrines tecnológicas</Link>
</SiteInfoListItem>
</ul>
</div>
<div>
<SiteInfoListTitle>Contato</SiteInfoListTitle>
<ul>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.contact
: `${landingPage.url}${landingPage.contact}`
}
>
Fale conosco
</Link>
</SiteInfoListItem>
</ul>
</div>
</SiteInfoContainer>
</SiteInfo>
<SiteSocket>
<SiteSocketContainer>
<div>
<span>Orgulhosamente</span> desenvolvido pela equipe da
<span> Plataforma Sabiá</span> na{' '}
<span>UNIVERSIDADE FEDERAL RURAL DO SEMI-ÁRIDO - UFERSA</span>.
</div>
<SiteSocketList>
<SiteSocketListItem>
<Link href={internalPages.privacyPolicy}>Política de Privacidade</Link>
</SiteSocketListItem>
<SiteSocketListItem>
<Link href={internalPages.termsOfUse}>Termos e Condições</Link>
</SiteSocketListItem>
<SiteSocketListItem>
<Link href={`${landingPage.url}${landingPage.contact}`}>Contato</Link>
</SiteSocketListItem>
</SiteSocketList>
</SiteSocketContainer>
</SiteSocket>
</StyledFooter>
)
