react-icons/fa#FaTwitter JavaScript Examples
The following examples show how to use
react-icons/fa#FaTwitter.
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: Admin_Home_Page.jsx From camprec with MIT License | 6 votes |
|
function Cards(props) {
return (
<>
<div className="card2 magin-top" >
<div className="card-body profile_width pop">
<div><img src={props.image} className="profile_img2 marginl"></img></div>
<div className="cb"><div className="cb2"><strong><h4 className="card-title centers fsize2">{props.name}</h4></strong>
<p className="card-text centers"><strong>Location : </strong> {props.location}</p></div>
<div className="details">
<p className="card-text fsize" ><strong>Email:</strong> {props.email}</p>
<p className="card-text fsize"><strong> Year of Establishment:</strong> {props.year}</p>
<p className="card-text fsize"><strong>Description :</strong> {props.description}</p>
<p className="card-text fsize"><strong>Webite :</strong> <a href={props.website}>{props.website}</a></p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
<ReactPlayer url={props.url} />
<div className='pop' >
<a href="/editcollege" className="btn btn-primary text_size left_m">Edit</a></div>
</div>
</div>
</div>
</div>
</>
)
}
Example #2
| Source File: CustomShareBlock.js From tomoblo with MIT License | 6 votes |
|
CustomShareBlock = props => {
const { url, title, siteName } = props;
const shareBlockProps = {
url: url,
button: ShareButtonIconOnly,
buttons: [
{ network: "Twitter", icon: FaTwitter },
{ network: "Facebook", icon: FaFacebook },
{ network: "Linkedin", icon: FaLinkedin },
{ network: "Email", icon: FaEnvelope }
],
text: title,
longtext: siteName
};
return (
<div className="mt-4">
<ShareBlockStandard {...shareBlockProps} />
<p className="text-center">
<i>If you like it, share it!</i>
</p>
</div>
);
}
Example #3
| Source File: CustomShareBlock.js From syntax.rocks with MIT License | 6 votes |
|
CustomShareBlock = props => {
const { url, title, siteName } = props;
const shareBlockProps = {
url: url,
button: ShareButtonIconOnly,
buttons: [
{ network: "Twitter", icon: FaTwitter },
{ network: "Facebook", icon: FaFacebook },
{ network: "Linkedin", icon: FaLinkedin },
{ network: "Email", icon: FaEnvelope }
],
text: title,
longtext: siteName
};
return (
<div className="mt-4">
<ShareBlockStandard {...shareBlockProps} />
<p className="text-center"><i>If you like it, share it!</i></p>
</div>
)
}
Example #4
| Source File: View_Student_Company_Page.jsx From camprec with MIT License | 6 votes |
|
function Cards(props) {
return (
<>
<Navbar_viewstdcompany></Navbar_viewstdcompany>
<div className="card1 magin-top" >
<div className="card-body profile_width pop">
<div><img src={props.image} className="profile_img "></img></div>
<div className="cb"><div className="cb2"><strong><h4 className="card-title centers fsize2">{props.name}</h4></strong>
<p className="card-text centers"><strong>Location : </strong> {props.location}</p></div>
<div className="details">
<p className="card-text fsize" ><strong>Email:</strong> {props.email}</p>
<p className="card-text fsize"><strong> Year of Establishment:</strong> {props.year}</p>
<p className="card-text fsize"><strong>Description :</strong> {props.description}</p>
<p className="card-text fsize"><strong>Webite :</strong> <a href={props.website}>{props.website}</a></p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
<ReactPlayer url={props.url} />
</div>
</div>
</div>
</div>
</>
)
}
Example #5
| 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 #6
| 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 #7
| Source File: Footer.js From Cross-woc with MIT License | 6 votes |
|
function Footer() {
//To get ongoing year
const currentYear = new Date().getFullYear();
return (
<div className='Footer text-center' id='contact'>
{/* Contact Us Heading */}
<h1 className="footer-heading">Contact Us</h1>
{/* Social Media Icons */}
<div className="footer-media">
<a className="footer-icon" href="/" target="_blank" title="Facebook"><FaFacebook size="20px" color="purple" /></a>
<a className="footer-icon" href="/" target="_blank" title="Twitter"><FaTwitter size="20px" color="purple" /></a>
<a className="footer-icon" href="/" target="_blank" title="Instagram"><FaInstagram size="20px" color="purple" /></a>
<a className="footer-icon" href="/" target="_blank" title="Linkedin"><FaLinkedinIn size="20px" color="purple" /></a>
<a className="footer-icon" href="/" target="_blank" title="Mail"><FaEnvelope size="20px" color="purple" /></a>
</div>
{/* Copyright Item */}
<div className="footer-copyright-item">
<p>Made with ❤️ by <a className="ieeelink" href="https://ieeedtu.in/" target="_blank" rel="noreferrer"> <span className="span"> IEEE DTU</span></a></p>
</div>
<div className="footer-copyright-item">
<p>© Copyright {currentYear} IEEE DTU. All rights reserved.</p>
</div>
</div>
)
}
Example #8
| 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 #9
| 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 #10
| 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 #11
| 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 #12
| 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 #13
| 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 #14
| 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 #15
| Source File: Footer.jsx From gatsby-airtable-listing with MIT License | 5 votes |
|
Footer = () => {
const {
site: {
meta: { links },
},
} = useStaticQuery(graphql`
query FooterQuery {
site {
meta: siteMetadata {
links {
contact
facebook
linkedin
twitter
}
}
}
}
`)
return (
<footer className="bg-white dark:bg-transparent">
<div className="container pt-12 pb-12 flex flex-wrap text-center lg:flex-row-reverse lg:justify-between lg:items-center">
<ul className="w-full lg:w-auto">
<FooterIconLink
href={links.facebook}
icon={FaFacebookF}
label="Facebook"
/>
<FooterIconLink
href={links.twitter}
icon={FaTwitter}
label="Twitter"
/>
<FooterIconLink
href={links.linkedin}
icon={FaLinkedinIn}
label="LinkedIn"
/>
<FooterIconLink
href={links.contact}
icon={FaEnvelope}
label="E-mail"
/>
</ul>
<div className="w-full lg:w-auto pt-6 lg:pt-0 text-blue-800 dark:text-blue-500 text-sm">
© 2020 All rights reserved.
</div>
</div>
</footer>
)
}
Example #16
| Source File: Footer.jsx From gatsby-contentful-portfolio with MIT License | 5 votes |
|
Footer = () => {
const {
site: {
meta: { links },
},
} = useStaticQuery(graphql`
query FooterQuery {
site {
meta: siteMetadata {
links {
facebook
instagram
pinterest
twitter
}
}
}
}
`)
return (
<div className="container py-12 md:flex md:items-center md:justify-between">
<ul className="flex justify-center md:order-2">
<FooterLink href={links.twitter} icon={FaTwitter} label="Twitter" />
<FooterLink href={links.facebook} icon={FaFacebook} label="Facebook" />
<FooterLink
href={links.instagram}
icon={FaInstagram}
label="Instagram"
/>
<FooterLink
href={links.pinterest}
icon={FaPinterest}
label="Pinterest"
/>
</ul>
<div className="mt-8 md:mt-0 md:order-1">
<p className="text-center text-sm md:text-base text-gray-700">
© 2020 John Doe. All rights reserved.
</p>
</div>
</div>
)
}
Example #17
| Source File: index.js From atendimento-e-agilidade-medica-AAMed with MIT License | 5 votes |
|
export default function Rodape() {
return (
<div className="rodape">
<div className="sub_rodape">
<div className="redes_sociais">
<ul>
<li>
<FaFacebookF />
</li>
<li>
<FaInstagram />
</li>
<li>
<FaLinkedin />
</li>
<li>
<FaTwitter />
</li>
</ul>
</div>
<div>
<i>Fale Conosco: (19) 3269-4089</i>
</div>
</div>
<div className="sub_rodape2">
<div>
<ul>
<span className="usuarios">Usuários</span>
<li>Aplicativo</li>
<li>Login</li>
<li>Cadastro</li>
<li>Localização</li>
<li>Suporte</li>
<li>Termos de Uso</li>
</ul>
</div>
<div>
<ul>
<span className="fast_Help">AAMed</span>
<li>Certificações</li>
<li>Membros</li>
<li>Base</li>
<li>Localização</li>
<li>Contato</li>
<li>Aplicação</li>
</ul>
</div>
<div>
<ul>
<span className="hospitais">Hospitais</span>
<li>Certificações</li>
<li>Login</li>
<li>Unidades</li>
<li>Localização</li>
<li>Contato</li>
<li>Termos de Uso</li>
</ul>
</div>
</div>
</div>
);
}
Example #18
| 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 #19
| Source File: View_Student_Page.jsx From camprec with MIT License | 5 votes |
|
function Cards(props) {
console.log(props.certification)
return (
<>
<div className="card2 magin-top" >
<div className="card-body profile_width pop">
<div ><img src={props.image} className="profile_img"></img></div>
<div className="cb"><strong><h4 className="card-title marginb centers fsize2">{props.name}</h4></strong>
<div className="details"><p className=" card-body card-text fsize"><strong>Email : <br/> </strong> {props.email}</p>
<p className="card-body card-text boder fsize" ><strong>Phone no: </strong> <br/>{props.phone}</p>
<p className="card-body card-text fsize"><strong>College : </strong> <br/>{props.college}</p>
<p className="card-body card-text fsize"><strong>Description : </strong> <br/> {props.description}</p>
<p className="card-body card-text fsize"><strong>Education : </strong><br/>
{props.education.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.education[i].course}<br/>
<strong>Institute: </strong>{props.education[i].institute}<br/>
<strong>Marks: </strong>{props.education[i].marks}<br/>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Work experience :</strong> <br/>
{props.work.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Job Title: </strong>{props.work[i].names}<br/>
<strong>Company: </strong>{props.work[i].companys}<br/>
<strong>Duration:</strong>{props.work[i].duration}<br/>
<strong>Description: </strong>{props.work[i].description}<br/>
<strong>Link:</strong> <a href={props.work[i].link}>{props.work[i].link}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Certification :</strong><br/> {props.certification.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.certification[i].courses}<br/>
<strong>Institutes: </strong>{props.certification[i].institutes}<br/>
<strong>Valid_till: </strong>{props.certification[i].valid_till}<br/>
<strong>Link: </strong> <a href={props.certification[i].links}>{props.certification[i].links}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
</div>
</div>
</div>
</div>
</>
)
}
Example #20
| Source File: SocialLinks.js From utahjs-gatsby with BSD Zero Clause License | 5 votes |
|
SocialLinks = ({ link }) => {
// state/functions for icon hover effect
const [animationState, setAnimationState] = useState(false);
const hoverHandler = () => {
setAnimationState(true);
};
const hoverExitHandler = () => {
setAnimationState(false);
};
let twitter;
let linkedIn;
if (link.title === 'Twitter') {
twitter = (
<a href={link.url}>
<div
onMouseEnter={hoverHandler}
onMouseLeave={hoverExitHandler}
className={!animationState ? 'wrapper' : 'wrapper hover'}
>
<FaTwitter className="socialLink" />
</div>
</a>
);
}
if (link.title === 'LinkedIn') {
linkedIn = (
<a href={link.url}>
<div
onMouseEnter={() => hoverHandler()}
onMouseLeave={() => hoverExitHandler()}
className={!animationState ? 'wrapper' : 'wrapper hover'}
>
<FaLinkedinIn className="socialLink" />
</div>
</a>
);
}
return (
<SocialWrapper>
{twitter}
{linkedIn}
</SocialWrapper>
);
}
Example #21
| Source File: View_Applicant_Student_Page.jsx From camprec with MIT License | 5 votes |
|
function Cards(props) {
console.log(props.certification)
return (
<>
<div className="card2 magin-top" >
<div className="card-body profile_width pop">
<div ><img src={props.image} className="profile_img"></img></div>
<div className="cb"><strong><h4 className="card-title marginb centers fsize2">{props.name}</h4></strong>
<div className="details"><p className=" card-body card-text fsize"><strong>Email : <br/> </strong> {props.email}</p>
<p className="card-body card-text boder fsize" ><strong>Phone no: </strong> <br/>{props.phone}</p>
<p className="card-body card-text fsize"><strong>College : </strong> <br/>{props.college}</p>
<p className="card-body card-text fsize"><strong>Description : </strong> <br/> {props.description}</p>
<p className="card-body card-text fsize"><strong>Education : </strong><br/>
{props.education.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.education[i].course}<br/>
<strong>Institute: </strong>{props.education[i].institute}<br/>
<strong>Marks: </strong>{props.education[i].marks}<br/>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Work experience :</strong> <br/>
{props.work.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Job Title: </strong>{props.work[i].names}<br/>
<strong>Company: </strong>{props.work[i].companys}<br/>
<strong>Duration:</strong>{props.work[i].duration}<br/>
<strong>Description: </strong>{props.work[i].description}<br/>
<strong>Link:</strong> <a href={props.work[i].link}>{props.work[i].link}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Certification :</strong><br/> {props.certification.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.certification[i].courses}<br/>
<strong>Institutes: </strong>{props.certification[i].institutes}<br/>
<strong>Valid_till: </strong>{props.certification[i].valid_till}<br/>
<strong>Link: </strong> <a href={props.certification[i].links}>{props.certification[i].links}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
</div>
</div>
</div>
</div>
</>
)
}
Example #22
| 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 #23
| Source File: Company_Home_Page.jsx From camprec with MIT License | 5 votes |
|
function Cards(props) {
return (
<>
<div className="magin-top">
<div className="card-body profile_width pop">
<div>
<img src={props.image} className="profile_img"></img>
</div>
<div className="cb">
<div className="cb2">
<strong>
<h4 className="card-title centers fsize2">{props.name}</h4>
</strong>
<p className="card-text centers">
<strong>Location : </strong> {props.location}
</p>
</div>
<div className="details">
<p className="card-text fsize">
<strong>Email:</strong> {props.email}
</p>
<p className="card-text fsize">
<strong> Year of Establishment:</strong> {props.year}
</p>
<p className="card-text fsize">
<strong>Description :</strong> {props.description}
</p>
<p className="card-text fsize">
<strong>Webite :</strong>{" "}
<a href={props.website}>{props.website}</a>
</p>
<p className="card-text fsize">
{" "}
<a href={props.facebook}>
<FaFacebookF></FaFacebookF>
</a>{" "}
<a href={props.twitter}>
<FaTwitter></FaTwitter>
</a>{" "}
<a href={props.LinkedIn}>
{" "}
<FaLinkedin></FaLinkedin>
</a>{" "}
<a href={props.Insta}>
{" "}
<FaInstagram></FaInstagram>
</a>
</p>
<ReactPlayer url={props.url} />
<div className="pop">
<a
href="/editcompany"
className="btn btn-primary text_size left_m"
>
Edit
</a>
</div>
</div>
</div>
</div>
</div>
</>
);
}
Example #24
| Source File: View_Admin_Std_Page.jsx From camprec with MIT License | 5 votes |
|
function Cards(props) {
console.log(props.certification)
return (
<>
<div className="card2 magin-top" >
<div className="card-body profile_width pop">
<div ><img src={props.image} className="profile_img"></img></div>
<div className="cb"><strong><h4 className="card-title marginb centers fsize2">{props.name}</h4></strong>
<div className="details"><p className=" card-body card-text fsize"><strong>Email : <br/> </strong> {props.email}</p>
<p className="card-body card-text boder fsize" ><strong>Phone no: </strong> <br/>{props.phone}</p>
<p className="card-body card-text fsize"><strong>College : </strong> <br/>{props.college}</p>
<p className="card-body card-text fsize"><strong>Description : </strong> <br/> {props.description}</p>
<p className="card-body card-text fsize"><strong>Education : </strong><br/>
{props.education.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.education[i].course}<br/>
<strong>Institute: </strong>{props.education[i].institute}<br/>
<strong>Marks: </strong>{props.education[i].marks}<br/>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Work experience :</strong> <br/>
{props.work.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Job Title: </strong>{props.work[i].names}<br/>
<strong>Company: </strong>{props.work[i].companys}<br/>
<strong>Duration:</strong>{props.work[i].duration}<br/>
<strong>Description: </strong>{props.work[i].description}<br/>
<strong>Link:</strong> <a href={props.work[i].link}>{props.work[i].link}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Certification :</strong><br/> {props.certification.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.certification[i].courses}<br/>
<strong>Institutes: </strong>{props.certification[i].institutes}<br/>
<strong>Valid_till: </strong>{props.certification[i].valid_till}<br/>
<strong>Link: </strong> <a href={props.certification[i].links}>{props.certification[i].links}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
</div>
</div>
</div>
</div>
</>
)
}
Example #25
| Source File: Student_Home_Page.jsx From camprec with MIT License | 5 votes |
|
function Cards(props) {
console.log(props.certification)
return (
<>
<div className="card2 magin-top" >
<div className="card-body profile_width pop">
<div ><img src={props.image} className="profile_img"></img></div>
<div className="cb"><strong><h4 className="card-title marginb centers fsize2">{props.name}</h4></strong>
<div className="details"><p className=" card-body card-text fsize"><strong>Email : <br/> </strong> {props.email}</p>
<p className="card-body card-text boder fsize" ><strong>Phone no: </strong> <br/>{props.phone}</p>
<p className="card-body card-text fsize"><strong>College : </strong> <br/>{props.college}</p>
<p className="card-body card-text fsize"><strong>Description : </strong> <br/> {props.description}</p>
<p className="card-body card-text fsize"><strong>Education : </strong><br/>
{props.education.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.education[i].course}<br/>
<strong>Institute: </strong>{props.education[i].institute}<br/>
<strong>Marks: </strong>{props.education[i].marks}<br/>
</div>
<br/>
</>
);
})}
<p ><a href="\addedu"><FaPlus></FaPlus></a> <a href="/deledu"><FaRegTrashAlt></FaRegTrashAlt></a> </p>
</p>
<p className="card-body card-text fsize"><strong>Work experience :</strong> <br/>
{props.work.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Job Title: </strong>{props.work[i].names}<br/>
<strong>Company: </strong>{props.work[i].companys}<br/>
<strong>Duration:</strong>{props.work[i].duration}<br/>
<strong>Description: </strong>{props.work[i].description}<br/>
<strong>Link:</strong> <a href={props.work[i].link}>{props.work[i].link}</a>
</div>
<br/>
</>
);
})}
<p ><a href="\addexp"><FaPlus></FaPlus></a> <a href="\delexp"><FaRegTrashAlt></FaRegTrashAlt></a> </p>
</p>
<p className="card-body card-text fsize"><strong>Certification :</strong><br/> {props.certification.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.certification[i].courses}<br/>
<strong>Institutes: </strong>{props.certification[i].institutes}<br/>
<strong>Valid_till: </strong>{props.certification[i].valid_till}<br/>
<strong>Link: </strong> <a href={props.certification[i].links}>{props.certification[i].links}</a>
</div>
<br/>
</>
);
})}
<p ><a href="\addcer"><FaPlus></FaPlus></a> <a href="\delcer"><FaRegTrashAlt></FaRegTrashAlt></a> </p>
</p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
</div>
</div>
</div>
</div>
</>
)
}
Example #26
| 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 #27
| Source File: index.js From codeursenseine.com with MIT License | 4 votes |
|
Organisers = ({ pageContext }) => {
const { organisers } = pageContext;
const socials = [
{ name: "twitter", icon: <FaTwitter /> },
{ name: "linkedin", icon: <FaLinkedin /> },
{ name: "github", icon: <FaGithub /> },
];
return (
<Layout theme="ces">
<OGImage path="/images/ces/social.jpg" />
<Seo title="Organisateurs" />
<Heading as="h1" mb={8}>
Organisateurs
</Heading>
<Stack spacing={6}>
<Heading size="lg">Associations</Heading>
<Text>
Codeurs en Seine est une association dont le but est la promotion et
le partage des pratiques et des nouveautés technologiques entre les
acteurs du développement informatique.
</Text>
<Text>
En plus de la conférence annuelle Codeurs en Seine, nous organisons
des meetups et des ateliers tout au long de l'année, sur Rouen et ses
environs.
</Text>
<Text>
Codeurs en Seine représente le Normandy Java User Group et Normandy
Agile User Group.
</Text>
<Text>
Elle est également une étape de l'
<A href="http://www.agiletour.org/">Agile Tour</A>.
</Text>
<Heading size="lg">Équipe</Heading>
<Text mb={8}>
Codeurs en Seine est propulsé par une équipe de bénévoles passionnés :
</Text>
<Grid templateColumns="repeat(auto-fit, minmax(6rem, 1fr))" gap={6}>
{organisers.map((organiser) => (
<Stack
alignItems="center"
key={organiser.childMdx.frontmatter.name}
>
<AspectRatio ratio={1} w="6em" maxW="100%">
<Image
fallbackSrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
src={organiser.childMdx.frontmatter.image.publicURL}
alt={organiser.childMdx.frontmatter.name}
boxShadow="brand"
objectFit="cover"
borderRadius={4}
/>
</AspectRatio>
<Text textAlign="center" fontSize="sm">
{organiser.childMdx.frontmatter.name}
</Text>
<Flex flexWrap="wrap">
{socials.map(
(social) =>
organiser.childMdx.frontmatter[social.name] && (
<IconButton
key={social.name}
as="a"
target="_blank"
href={organiser.childMdx.frontmatter[social.name]}
aria-label={`${organiser.childMdx.frontmatter.name} ${social.name}`}
icon={social.icon}
variant="ghost"
colorScheme="brand"
size="sm"
d="inline-flex"
/>
)
)}
</Flex>
</Stack>
))}
</Grid>
</Stack>
</Layout>
);
}
Example #28
| Source File: Footer.js From airdnd-frontend with MIT License | 4 votes |
|
Footer = ({ ...rest }) => {
return (
<StFooter {...rest}>
<StUpperWrapper>
<StContentSection>
<StContentTitle>소개</StContentTitle>
<StContentList>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/d/howairbnbworks"
target="_blank"
>
에어비앤비 이용 방법
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://news.airbnb.com/ko/"
target="_blank"
>
뉴스룸
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnbcitizen.com/?utm_source=airbnb&utm_medium=footer&utm_campaign=product"
target="_blank"
>
Airbnb Citizen
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/plus"
target="_blank"
>
에어비앤비 플러스
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/luxury"
target="_blank"
>
에어비앤비 Luxe
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.hoteltonight.com/?utm_source_name=Airbnb&utm_campaign_name=Dr_Us_Desktop_Airbnb_Footer"
target="_blank"
>
호텔투나잇
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/work?s=footer"
target="_blank"
>
에어비앤비 비즈니스 프로그램
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/d/olympics"
target="_blank"
>
올림픽
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://careers.airbnb.com/"
target="_blank"
>
채용정보
</StContentItemLink>
</StContentItem>
</StContentList>
</StContentSection>
<StContentSection>
<StContentTitle>커뮤니티</StContentTitle>
<StContentList>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/diversity"
target="_blank"
>
다양성 및 소속감
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/d/accessibility"
target="_blank"
>
접근성
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/magazine"
target="_blank"
>
에어비앤비 매거진
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/associates?from=footer"
target="_blank"
>
에어비앤비 어소시에이트
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/d/covid19relief"
target="_blank"
>
구호 인력을 위한 숙소
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/invite?r=6"
target="_blank"
>
친구 초대하기
</StContentItemLink>
</StContentItem>
</StContentList>
</StContentSection>
<StContentSection>
<StContentTitle>호스팅하기</StContentTitle>
<StContentList>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/host/homes?from_footer=1"
target="_blank"
>
숙소 호스팅
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/d/onlinehost"
target="_blank"
>
온라인 체험 호스팅
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/host/experiences"
target="_blank"
>
체험 호스팅하기
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/resources/hosting-homes/t/leadership-updates-35"
target="_blank"
>
브라이언 체스키 CEO의 메시지
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/help/article/1387/%ED%95%9C%EA%B5%AD%EC%97%90%EC%84%9C-%EC%B1%85%EC%9E%84%EA%B0%90-%EC%9E%88%EB%8A%94-%ED%98%B8%EC%8A%A4%ED%8C%85-%ED%95%98%EA%B8%B0"
target="_blank"
>
책임감 있는 호스팅
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/openhomes?from_footer=1"
target="_blank"
>
Open Homes
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/resources/hosting-homes"
target="_blank"
>
자료 센터
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://community.withairbnb.com/t5/Community-Center-KR/ct-p/Community-Center-Korean"
target="_blank"
>
커뮤니티 센터
</StContentItemLink>
</StContentItem>
</StContentList>
</StContentSection>
<StContentSection>
<StContentTitle>에어비앤비 지원</StContentTitle>
<StContentList>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/resources/hosting-homes"
target="_blank"
>
코로나19 관련 업데이트
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/help/home"
target="_blank"
>
도움말 센터
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/help/article/2701/%EC%BD%94%EB%A1%9C%EB%82%98%EB%B0%94%EC%9D%B4%EB%9F%AC%EC%8A%A4%EA%B0%90%EC%97%BC%EC%A6%9D19%EC%BD%94%EB%A1%9C%EB%82%9819-%EA%B4%80%EB%A0%A8-%EC%A0%95%EC%83%81%EC%B0%B8%EC%9E%91%EC%9D%B4-%EA%B0%80%EB%8A%A5%ED%95%9C-%EC%83%81%ED%99%A9-%EC%A0%95%EC%B1%85"
target="_blank"
>
예약 취소 옵션
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/neighbors"
target="_blank"
>
에어비앤비 이웃 민원 지원
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/trust"
target="_blank"
>
신뢰와 안전
</StContentItemLink>
</StContentItem>
</StContentList>
</StContentSection>
</StUpperWrapper>
<StLowerWrapper>
<StLowerLeftWrapper>
<StCopyRight>
© 2020 DEVengersAssemble. All rights reserved
</StCopyRight>
<StRuleList>
<StRuleItem>
<StRuleLink
href="https://www.airbnb.co.kr/terms/privacy_policy"
target="_blank"
>
개인정보 처리방침
</StRuleLink>
</StRuleItem>
<StDot aria-hidden="true">・</StDot>
<StRuleItem>
<StRuleLink href="https://www.airbnb.co.kr/terms" target="_blank">
이용약관
</StRuleLink>
</StRuleItem>
<StDot aria-hidden="true">・</StDot>
<StRuleItem>
<StRuleLink
href="https://www.airbnb.co.kr/sitemaps/v2"
target="_blank"
>
사이트맵
</StRuleLink>
</StRuleItem>
<StDot aria-hidden="true">・</StDot>
<StRuleItem>
<StRuleLink
href="https://www.airbnb.co.kr/home/updated_cancellation_policies?korean_strict_policy=true#strict"
target="_blank"
>
한국의 변경된 환불 정책
</StRuleLink>
</StRuleItem>
</StRuleList>
</StLowerLeftWrapper>
<StLowerRightWrapper>
<StSettingButtonWrapper>
<StSettingButton btnType="underlined">
<span className="a11yHidden">언어 바꾸기 버튼</span>
<FiGlobe />
<StButtonText>한국어(KR)</StButtonText>
</StSettingButton>
<StSettingButton btnType="underlined" height="20px" fontSize="14px">
<span className="a11yHidden">화폐 바꾸기 버튼</span>
<FaWonSign />
<StButtonText>KRW</StButtonText>
</StSettingButton>
</StSettingButtonWrapper>
<StSiteLinkList>
<StSiteLinkItem>
<StSiteLink
href="https://www.facebook.com/AirbnbKorea"
target="_blank"
>
<span className="a11yHidden">페이스북으로 이동하기</span>
<FaFacebookF />
</StSiteLink>
</StSiteLinkItem>
<StSiteLinkItem>
<StSiteLink href="https://twitter.com/airbnb" target="_blank">
<span className="a11yHidden">트위터로 이동하기</span>
<FaTwitter />
</StSiteLink>
</StSiteLinkItem>
<StSiteLinkItem>
<StSiteLink
href="https://www.instagram.com/airbnb/"
target="_blank"
>
<span className="a11yHidden">인스타그램으로 이동하기</span>
<FaInstagram />
</StSiteLink>
</StSiteLinkItem>
</StSiteLinkList>
</StLowerRightWrapper>
</StLowerWrapper>
</StFooter>
);
}
Example #29
| 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>
)
