@fortawesome/free-brands-svg-icons#faTwitter JavaScript Examples
The following examples show how to use
@fortawesome/free-brands-svg-icons#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: Social.js From Next.js-e-commerce-online-store with MIT License | 6 votes |
|
export default function Social() {
return (
<div>
<form>
<label htmlFor="email">Subscribe to the news!</label>
<input type="email" size="20" id="email" />
<input type="submit" value="Submit"></input>
</form>
<div>
<div>Our social media:</div>
<Link href="/#">
<a aria-label="Facebook icon link"><FontAwesomeIcon icon={faFacebook} size="2x" /></a>
</Link>
<Link href="/#">
<a aria-label="Twitter icon link"><FontAwesomeIcon icon={faTwitter} size="2x" /></a>
</Link>
<Link href="/#">
<a aria-label="Instagram icon link"><FontAwesomeIcon icon={faInstagram} size="2x" /></a>
</Link>
<Link href="/#">
<a aria-label="YouTube icon link"><FontAwesomeIcon icon={faYoutube} size="2x" /></a>
</Link>
<Link href="/#">
<a aria-label="LinkedIn icon link"><FontAwesomeIcon icon={faLinkedin} size="2x" /></a>
</Link>
</div>
<div>© 1991 - {new Date().getFullYear()} All rights reserved.</div>
</div>
)
}
Example #2
| Source File: index.jsx From defizap-frontend with GNU General Public License v2.0 | 6 votes |
|
Confirmed = props => (
<div className="container loading">
<div className="row">
<div className="col-md-12 text-center pt-4">
<FontAwesomeIcon size="2x" color="green" icon={faCheckCircle} />
{props.txId ? (
<>
<Row className="justify-content-center">
<a
href={`https://etherscan.io/tx/${props.txId}`}
rel="noopener noreferrer"
target="_blank"
>
View Transaction on Etherscan
</a>
</Row>
<Row className="justify-content-center">
<a
href="https://twitter.com/intent/tweet?text=I%20just%20got%20instant%20access%20to&hashtags=defi&via=DeFi_Zap"
target="_blank"
rel="noopener noreferrer"
>
Tweet it out{' '}
<FontAwesomeIcon size="lg" color="#1DA1F2" icon={faTwitter} />
</a>
</Row>
</>
) : null}
</div>
</div>
</div>
)
Example #3
| Source File: index.js From official-website-backend with MIT License | 6 votes |
|
/**
* Component which contains social media links for Energia Powered
*
* @component
* @returns {JSX} Footer Component
*/
function Footer() {
let socialData = [
{ link: "https://www.facebook.com/Energia.Powered/", label: faFacebook },
{
link: "https://www.youtube.com/channel/UCxNgZOJJx9LzqWLhCEu8Djw",
label: faYoutube
},
{ link: "https://www.instagram.com/energia.powered/", label: faInstagram },
{ link: "https://twitter.com/Energia_Powered", label: faTwitter },
{
link: "https://www.linkedin.com/company/energiapowered/",
label: faLinkedin
}
];
const [social] = useState(socialData);
return (
<footer id="Footer">
<ul className="text-center social-links row list-unstyled">
{social.length > 0 &&
social.map(item => {
return (
<li key={item.link} className="social-links-item col-xs-2">
{/* noopener & nopreferrer to prevent vulnerbilities */}
<a target="_blank" rel="noopener noreferrer" href={item.link}>
<FontAwesomeIcon icon={item.label} />
</a>
</li>
);
})}
</ul>
</footer>
);
}
Example #4
| Source File: TitleBar.js From aava.sh with MIT License | 6 votes |
|
function TitleBar() {
const closeWindow = () => {
window.close();
}
return (
<TitleBarDiv>
<ButtonsDiv>
<CloseButton onClick={closeWindow}>X</CloseButton>
</ButtonsDiv>
<TitleDiv>
<a href='https://github.com/aavshr/aava.sh'>aava.sh</a>
</TitleDiv>
<LinksDiv>
<a href="https://github.com/aavshr">
<FontAwesomeIcon icon={faGithub}/>
</a>
<a href="https://twitter.com/aav_shr">
<FontAwesomeIcon icon={faTwitter}/>
</a>
<a href="https://linkedin.com/in/aavshr">
<FontAwesomeIcon icon={faLinkedin}/>
</a>
<a href="mailto:[email protected]">
<FontAwesomeIcon icon={faEnvelope}/>
</a>
</LinksDiv>
</TitleBarDiv>
);
}
Example #5
| Source File: App.js From lrc-staking-dapp with MIT License | 6 votes |
|
library.add( far, fas, faBookReader, faArrowLeft, faArrowRight, faQuestionCircle, faCopy, faSignOutAlt, faEdit, faAngleDown, faExternalLinkAlt, fab, faEthereum, faTwitter, faDiscord, faUnlink, faSearch, faFortAwesome, faExchangeAlt, faChartPie, faGlobe, faDonate, faDollarSign, );
Example #6
| Source File: faLibrary.js From cosmoscan-front with Apache License 2.0 | 6 votes |
|
library.add( faBars, faTimes, faChevronDown, faChevronUp, faCalendarAlt, faTelegramPlane, faTwitter, faMediumM, faRedditAlien, faQuestionCircle, faCheck, faSearch, );
Example #7
| Source File: index.js From Webiu with MIT License | 6 votes |
|
GithubCard = ({ name, username, description, twitter, email, image, url, blog, location, from, repo }) => {
return (
<div>
<div className="card">
{image ? <div className="card-img-div">
<img src={image} alt="Profile-img" className="card-img" />
</div> : null}
{name ? <h4 className="card-title">
{name}
</h4> : null}
{username ? <p className="card-para">
{'@' + username}
</p> : null}
{description ? <p className="card-para">
{description}
</p> : null}
{location ? <p className="card-para">
<FontAwesomeIcon icon={faMapMarkerAlt} style={{color:'#51ad28'}} /> {location}
</p> : null}
<p className="card-para">
{url ? <Link to={url} className="btn">GitHub</Link> : null}
{blog ? <Link to={blog} className="btn">Blog</Link> : null}
</p>
{repo ? <p className="card-para">
{repo} Repositories
</p> : null}
{from ? <p className="card-para">
Active since <span className="active-since">{moment(from).format("MMMM Do YYYY")}</span>
</p> : null}
{twitter ? <div style={{ margin: "5px 0 0 10px" }}>
<a className="anchor" href={`https://twitter.com/${twitter}`}><FontAwesomeIcon icon={faTwitter} style={{color:'#377293'}} /></a>
</div> : null}
{email ? <div style={{ margin: "5px 0 0 15px" }}>
<a className="anchor" href={`mailto:${email}`}><FontAwesomeIcon icon={faEnvelope} style={{color:'#377293'}} /></a>
</div> : null}
</div>
</div>
)
}
Example #8
| Source File: index.js From Webiu with MIT License | 6 votes |
|
Footer = ({mainText, socialLinks = {} }) => {
const {
facebook,
gitter,
twitter,
github,
linkedin,
medium
} = socialLinks
return (
<div className="footer-component">
<Container>
<Row>
<Col>
<div className="social-icons-container">
{!facebook || <a href={facebook}><FontAwesomeIcon icon={faFacebook} className="icon" /></a>}
{!gitter || <a href={gitter}><FontAwesomeIcon icon={faGitter} className="icon" /></a>}
{!medium || <a href={medium}><FontAwesomeIcon icon={faMedium} className="icon" /></a>}
{!twitter || <a href={twitter}><FontAwesomeIcon icon={faTwitter} className="icon" /></a>}
{!github || <a href={github}><FontAwesomeIcon icon={faGithub} className="icon" /></a>}
{!linkedin || <a href={linkedin}><FontAwesomeIcon icon={faLinkedin} className="icon" /></a>}
</div>
<p className="main-text">{mainText} {(new Date().getFullYear())}</p>
</Col>
</Row>
</Container>
</div>
)
}
Example #9
| Source File: links.js From yezz.me with MIT License | 5 votes |
|
export default function Links() {
return (
<ul className="list-group list-group-horizontal">
<li className="list-group-item">
<a
href="mailto:[email protected]"
target="_blank"
rel="noreferrer"
alt="email link"
>
<FontAwesomeIcon icon={faEnvelope} />
</a>
</li>
<li className="list-group-item">
<a
href="https://github.com/yezz123"
target="_blank"
rel="noreferrer"
alt="github link"
>
<FontAwesomeIcon icon={faGithub} />
</a>
</li>
<li className="list-group-item">
<a
href="https://linkedin.com/in/yezz123"
target="_blank"
rel="noreferrer"
alt="linkedin link"
>
<FontAwesomeIcon icon={faLinkedin} />
</a>
</li>
<li className="list-group-item">
<a
href="https://twitter.com/THyasser1"
target="_blank"
rel="noreferrer"
alt="twitter link"
>
<FontAwesomeIcon icon={faTwitter} />
</a>
</li>
</ul>
)
}
Example #10
| Source File: fontawesome.js From xmrig-workers with GNU General Public License v3.0 | 5 votes |
|
export default function () {
library.add(faGithub, faWindows, faLinux, faTwitter, faReddit, faTelegram, faCheckCircle, faMicrochip, faTrashAlt,
faPaperPlane, faSpinner, faFlask, faInfoCircle, faPen, faTools, faCheck, faPlus, faCog, faExclamationTriangle,
faQuestionCircle, faSyncAlt, faInfinity, faDownload, faCopy, faPlug, faTimesCircle);
}
Example #11
| Source File: SystemIcons.jsx From gatsby-startbootstrap-agency with MIT License | 5 votes |
|
TwitterIcon = makeFAIcon(faTwitter)
Example #12
| Source File: tables.js From volt-react-dashboard with MIT License | 5 votes |
|
pageTraffic = [
{ id: 1, source: "Direct", sourceType: "Direct", trafficShare: 51, change: 2.45, sourceIcon: faGlobeEurope, sourceIconColor: "gray" },
{ id: 2, source: "Google Search", sourceType: "Search / Organic", trafficShare: 18, change: 17.67, sourceIcon: faGoogle, sourceIconColor: "info" },
{ id: 3, source: "youtube.com", sourceType: "Social", category: "Arts and Entertainment", rank: 2, trafficShare: 27, sourceIcon: faYoutube, sourceIconColor: "danger" },
{ id: 4, source: "yahoo.com", sourceType: "Referral", category: "News and Media", rank: 11, trafficShare: 8, change: -9.30, sourceIcon: faYahoo, sourceIconColor: "purple" },
{ id: 5, source: "twitter.com", sourceType: "Social", category: "Social Networks", rank: 4, trafficShare: 4, sourceIcon: faTwitter, sourceIconColor: "info" }
]
Example #13
| Source File: UserLinks.js From paigeniedringhaus.com with MIT License | 5 votes |
|
UserLinks = (props) => {
const { config } = props;
const getLinkIcons = (icon) => {
switch (icon) {
case 'faGithub':
return <FontAwesomeIcon icon={faGithub} />;
case 'faTwitter':
return <FontAwesomeIcon icon={faTwitter} />;
case 'faEnvelope':
return <FontAwesomeIcon icon={faEnvelope} />;
case 'faMedium':
return <FontAwesomeIcon icon={faMedium} />;
case 'faDev':
return <FontAwesomeIcon icon={faDev} />;
}
};
const getLinkElements = () => {
const { userLinks } = config;
return userLinks.map((link) => (
<a
href={link.url}
target="_blank"
rel="noopener noreferrer"
key={link.label}
>
{getLinkIcons(link.iconClassName)}
<div className="user-link-text">{link.label}</div>
</a>
));
};
const { userLinks, siteRss } = config;
if (!userLinks) {
return null;
}
return (
<div className="user-links">
{getLinkElements()}
<a href={siteRss} target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faRssSquare} />
<div>RSS</div>
</a>
</div>
);
}
Example #14
| Source File: footer.js From nashvillefccwebsite with MIT License | 5 votes |
|
function footer() {
return (
<footer>
<nav className={componentStyles.footerNav}>
<Connect className={componentStyles.connectLogo} alt={`Connect Logo`} />
<div className={componentStyles.socials}>
<a
href="https://www.meetup.com/freeCodeCamp-Nashville/"
aria-label="Meetup"
rel="noopener noreferrer"
target="_blank"
>
<FontAwesomeIcon icon={faMeetup} size="1x" color="#444444" />
</a>
<a
href="https://discord.gg/cX9BkKrAPV"
aria-label="Discord"
rel="noopener noreferrer"
target="_blank"
>
<FontAwesomeIcon icon={faDiscord} size="1x" color="#444444" />
</a>
<a
href="https://nashdev.com/"
aria-label="Slack"
rel="noopener noreferrer"
target="_blank"
>
<FontAwesomeIcon icon={faSlack} size="1x" color="#444444" />
</a>
<a
href="https://github.com/nashvillefcc/"
aria-label="GitHub"
rel="noopener noreferrer"
target="_blank"
>
<FontAwesomeIcon icon={faGithub} size="1x" color="#444444" />
</a>
<a
href="https://twitter.com/nashvillefcc/"
aria-label="Twitter"
rel="noopener noreferrer"
target="_blank"
>
<FontAwesomeIcon icon={faTwitter} size="1x" color="#444444" />
</a>
<a
href="https://www.facebook.com/groups/free.code.camp.nashville/permalink/1479740658703738/"
aria-label="Facebook"
rel="noopener noreferrer"
target="_blank"
>
<FontAwesomeIcon icon={faFacebook} size="1x" color="#444444" />
</a>
</div>
<div className={componentStyles.emailAndCopyright}>
<div>
<a
href="mailto:[email protected]"
className={componentStyles.emailLink}
>
<FontAwesomeIcon icon={faEnvelope} size="2x" color="white" />
<p className={componentStyles.emailName}>[email protected]</p>{' '}
{/* This will change to something else once we setup a domain */}
</a>
<p>© 2021 FreeCodeCamp Nashville</p>
</div>
<a href="https://www.netlify.com">
<img
src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg"
alt="Deploys by Netlify"
/>
</a>
</div>
</nav>
</footer>
);
}
Example #15
| Source File: organization.js From goodhere with MIT License | 5 votes |
|
function SocialLinksSection({ org, className }) {
return (
<SidebarSectionList title="Links" className={className}>
{org.homepage && (
<SidebarSectionList.Item
text="Homepage"
href={org.homepage}
icon={faExternalLinkAlt}
/>
)}
{org.crunchbase && (
<SidebarSectionList.Item
text="Crunchbase"
href={org.crunchbase}
icon={faExternalLinkAlt}
/>
)}
{org.linkedIn && (
<SidebarSectionList.Item
text="LinkedIn"
href={org.linkedIn}
icon={faLinkedin}
/>
)}
{org.twitter && (
<SidebarSectionList.Item
text={parseTwitterHandle(org.twitter) || "Twitter"}
href={org.twitter}
icon={faTwitter}
/>
)}
{org.facebook && (
<SidebarSectionList.Item
text="Facebook"
href={org.facebook}
icon={faFacebook}
/>
)}
</SidebarSectionList>
)
}
Example #16
| Source File: single-site.js From staticwebsitehosting with MIT License | 5 votes |
|
BlogPostTemplate = ({ data, location }) => {
const site = data.markdownRemark
const siteTitle = data.site.siteMetadata.title
const homePage = site.frontmatter.homepage
const twitter = site.frontmatter.twitter
const pricingLink = site.frontmatter.pricing
const cosmicAppLink = site.frontmatter.cosmicapplink
return (
<Layout location={location} title={siteTitle}>
<SEO
title={site.frontmatter.title}
description={site.frontmatter.description || site.excerpt}
/>
<article>
<h2 className="text-3xl font-black mb-4">{site.frontmatter.title}</h2>
<div className="inline-flex">
<a
href={homePage}
target="_blank"
rel="noreferrer"
className="shadow-none mr-4 hover:text-green-600"
>
<FontAwesomeIcon icon={faHome} className="mr-1" />
<span className="text-black">Home Page</span>
</a>
{
twitter &&
<a
href={`https://twitter.com/${twitter}`}
target="_blank"
rel="noreferrer"
className="shadow-none mr-4 hover:text-blue-600"
>
<FontAwesomeIcon icon={faTwitter} className="mr-1" />
<span className="text-black">Twitter</span>
</a>
}
<a
href={pricingLink}
target="_blank"
rel="noreferrer"
className="shadow-none mr-4 hover:text-purple-800"
>
<FontAwesomeIcon icon={faDollarSign} className="mr-1" />
<span className="text-black">Pricing</span>
</a>
</div>
{cosmicAppLink && (
<div className="flex mt-4">
<a
className="px-6 py-3 bg-blue-500 text-white shadow-none flex items-center justify-center hover:bg-blue-600"
href={cosmicAppLink}
target="_blank"
rel="noreferrer"
>
<img
src={CosmicIcon}
width="25"
className="mr-2 m-0"
alt="Cosmic Icon"
/>
Deploy Cosmic Starter
</a>
</div>
)}
<section
className="markdown mt-6"
dangerouslySetInnerHTML={{ __html: site.html }}
/>
</article>
</Layout>
)
}
Example #17
| Source File: organization.js From climatescape.org with MIT License | 5 votes |
|
function SocialLinksSection({ org, className }) {
return (
<SidebarSectionList title="Links" className={className}>
{org.homepage && (
<SidebarSectionList.Item
text="Homepage"
href={org.homepage}
icon={faExternalLinkAlt}
/>
)}
{org.crunchbase && (
<SidebarSectionList.Item
text="Crunchbase"
href={org.crunchbase}
icon={faExternalLinkAlt}
/>
)}
{org.linkedIn && (
<SidebarSectionList.Item
text="LinkedIn"
href={org.linkedIn}
icon={faLinkedin}
/>
)}
{org.twitter && (
<SidebarSectionList.Item
text={parseTwitterHandle(org.twitter) || "Twitter"}
href={org.twitter}
icon={faTwitter}
/>
)}
{org.facebook && (
<SidebarSectionList.Item
text="Facebook"
href={org.facebook}
icon={faFacebook}
/>
)}
</SidebarSectionList>
)
}
Example #18
| Source File: SocialIcons.js From bonded-stablecoin-ui with MIT License | 5 votes |
|
SocialIcons = ({size = "full", centered = false, gaLabel}) => { // type full or short
const { t } = useTranslation();
const { lang } = useSelector((state) => state.settings);
const links = [
{
name: "discord",
icon: faDiscord,
link: "https://discord.obyte.org/"
},
{
name: "telegram",
icon: faTelegram,
link: "https://t.me/obyteorg",
link_ru: "https://t.me/obyte_ru"
},
{
name: "weixin",
icon: faWeixin,
link: "https://mp.weixin.qq.com/s/JB0_MlK6w--D6pO5zPHAQQ"
},
{
name: "twitter",
icon: faTwitter,
link: "https://twitter.com/ObyteOrg"
},
{
name: "youtube",
icon: faYoutube,
link: "https://www.youtube.com/channel/UC59w9bmROOeUFakVvhMepPQ/"
},
{
name: "medium",
icon: faMediumM,
link: "https://blog.obyte.org"
},
{
name: "reddit",
icon: faRedditAlien,
link: "https://www.reddit.com/r/obyte/"
},
{
name: "bitcoin",
icon: faBitcoin,
link: "https://bitcointalk.org/index.php?topic=1608859.0"
},
{
name: "facebook",
icon: faFacebook,
link: "https://www.facebook.com/obyte.org"
}
];
const gaTracking = (name) => {
ReactGA.event({
category: "Social",
action: "Click to " + name,
label: gaLabel
})
}
return (<div style={{ textAlign: "center", fontSize: 14 }}>
{size === "full" && <div style={{ marginBottom: 10 }}><Text type="secondary">{t("footer.join_community", "Join the community, get help")}:</Text></div>}
<div style={{ display: "flex", justifyContent: centered ? "center" : "flex-start", flexWrap: "wrap", alignItems: "center", fontSize: 18 }}>
{(size === "full" ? links : links.slice(0,5)).map((social) => <a style={{ margin: "5px 10px", color: "#0037ff" }} key={"link-" + social.name} target="_blank" rel="noopener" href={(lang && social["link_" + lang]) || social.link} onClick={() => gaTracking(social.name)}><FontAwesomeIcon size="lg" icon={social.icon} /></a>)}
</div>
</div>)
}
Example #19
| Source File: index.js From gatsby-blog-mdx with MIT License | 5 votes |
|
Header = ({ siteTitle, showTitle, isPostTemplate }) => {
return (
<StyledMainHeader className="main-header">
{/* Google AdSense */}
{config.googleAdSenseId && config.googleAdSenseId !== "" && (
<script
data-ad-client={config.googleAdSenseId}
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
></script>
)}
{isPostTemplate && config.useScrollIndicator && <ProgressBar />}
<StyledMainHeaderInner className="main-header-inner">
<h1 style={{ fontSize: "1.5rem" }}>
{showTitle && <Link to="/">{`${siteTitle}`}</Link>}
</h1>
<StyledMediaIcons>
<HeaderIcon
accountInfo={config.socialMediaLinks.email}
mediaName={"email"}
preHref={"mailto:"}
icon={faEnvelope}
/>
<HeaderIcon
accountInfo={config.socialMediaLinks.github}
mediaName={"github"}
preHref={"https://github.com/"}
icon={faGithub}
/>
<HeaderIcon
accountInfo={config.socialMediaLinks.facebook}
mediaName={"facebook"}
preHref={"https://facebook.com/"}
icon={faFacebook}
/>
<HeaderIcon
accountInfo={config.socialMediaLinks.instagram}
mediaName={"instagram"}
preHref={"https://instagram.com/"}
icon={faInstagram}
/>
<HeaderIcon
accountInfo={config.socialMediaLinks.twitter}
mediaName={"twitter"}
preHref={"https://twitter.com/"}
icon={faTwitter}
/>
<HeaderIcon
accountInfo={config.socialMediaLinks.linkedIn}
mediaName={"linkedin"}
preHref={"https://linkedin.com/"}
icon={faLinkedin}
/>
<HeaderIcon
accountInfo={config.socialMediaLinks.medium}
mediaName={"medium"}
preHref={"https://medium.com/@"}
icon={faMedium}
/>
</StyledMediaIcons>
</StyledMainHeaderInner>
</StyledMainHeader>
)
}
Example #20
| Source File: Campaign.jsx From journey.io with MIT License | 4 votes |
|
render() {
console.log('state', this.state);
const getId = url => {
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
const match = url.match(regExp);
return match && match[2].length === 11 ? match[2] : null;
};
const videoUrl = this.state.campaignLinks.video || '';
const videoId = getId(videoUrl);
const campaignDisplay =
Object.keys(this.state.campaignLinks).length > 0 ? (
<div>
<iframe
width="290"
height="200"
src={`http://www.youtube.com/embed/${videoId}`}
frameBorder="0"
/>
<br />
<br />
<div className="d-flex flex-row">
<a
className="socialMediaLink"
href={this.state.campaignLinks.spotify}
>
<FontAwesomeIcon
style={{ width: '2vw', height: '2vw' }}
icon={faSpotify}
/>
</a>
<br />
<a
className="socialMediaLink"
href={this.state.campaignLinks.instagram}
>
<FontAwesomeIcon
style={{ width: '2vw', height: '2vw' }}
icon={faInstagram}
/>
</a>
<br />
<a
className="socialMediaLink"
href={this.state.campaignLinks.facebook}
>
<FontAwesomeIcon
style={{ width: '2vw', height: '2vw' }}
icon={faFacebook}
/>
</a>
<br />
<a
className="socialMediaLink"
href={this.state.campaignLinks.soundcloud}
>
<FontAwesomeIcon
style={{ width: '2vw', height: '2vw' }}
icon={faSoundcloud}
/>
</a>
<br />
<a
className="socialMediaLink"
href={this.state.campaignLinks.twitter}
>
<FontAwesomeIcon
style={{ width: '2vw', height: '2vw' }}
icon={faTwitter}
/>
</a>
<br />
<a
className="socialMediaLink"
href={this.state.campaignLinks.youtube}
>
<FontAwesomeIcon
style={{ width: '2vw', height: '2vw' }}
icon={faYoutube}
/>
</a>
<br />
<br />
</div>
{this.state.campaignLinks.bio}
<br />
<br />
</div>
) : (
<div></div>
);
return (
<div className="d-flex mx-auto">
<Card
style={{ width: '60em' }}
className="mx-auto justify-content-center shadow p-3 mb-5 bg-white rounded row justify-content-center align-self-center"
>
<Card.Title>
<h2>
Let {this.props.artistName} know that you want to see them in your
city!
</h2>
</Card.Title>
<br />
<div className="row">
<div className="col-8">
<Map campaignId={this.props.campaignId} />
</div>
<div className="col-4">
{campaignDisplay}
<LocationSearchInput
handleChange={this.handleChange}
handleSelect={this.handleSelect}
submitInterest={this.submitInterest}
address={this.state.address}
/>
</div>
</div>
</Card>
</div>
);
}
Example #21
| Source File: contact.js From paigeniedringhaus.com with MIT License | 4 votes |
|
ContactPage = () => {
return (
<Layout>
<div className="contact-container page-body">
<Helmet title={`Contact | ${config.siteTitle}`} />
<h1>Contact</h1>
<section>
<h2 className="constact-no-underline">
Thanks again for visiting my site, I hope you like it.
<br />
If you'd like to get in touch...
</h2>
</section>
<section>
<h2>
Send me an email
<FontAwesomeIcon icon={faEnvelope} />
</h2>
<p>
If you'd like to say "hi" or want to talk, feel free to reach me at
<a
href="#mailgo"
data-address="hellopaigen"
data-domain="gmail.com"
>
hellopaigen @ gmail.com
</a>
.
</p>
</section>
<section>
<h2>
Follow me & chat on social media
<FontAwesomeIcon icon={faTwitter} />
</h2>
<ul>
<li>
I'm on Twitter at
<a
href="https://twitter.com/pniedri"
target="_blank"
rel="noopener noreferrer"
>
@pniedri
</a>
</li>
<li>
I publish on
<a
href="https://paigen11.medium.com"
target="_blank"
rel="noopener noreferrer"
>
Medium
</a>
and
<a
href="https://dev.to/paigen11"
target="_blank"
rel="noopener noreferrer"
>
DEV
</a>
under @paigen11.
</li>
<li>
And I've started sharing my IoT projects on
<a
href="https://www.hackster.io/paige-niedringhaus"
target="_blank"
rel="noopener noreferrer"
>
Hackster.io
</a>
too.
</li>
</ul>
</section>
<section>
<h2>
Check out my Github profile
<FontAwesomeIcon icon={faGithub} />
</h2>
<p>
All of the
<a
href="https://github.com/paigen11"
target="_blank"
rel="noopener noreferrer"
>
projects
</a>
I build for myself (mostly to learn new stuff) are open
source, and I'm happy for people to fork them and put them to use.
</p>
</section>
<section>
<h2>
Or subscribe to my Substack newsletter
<FontAwesomeIcon icon={faRssSquare} />
</h2>
<p>
I promise to never send spam, only useful emails about new articles
I've written or links to talks I've given.
</p>
<br />
<Subscribe />
<br />
<br />
<p>Thanks and have a great day!</p>
</section>
</div>
</Layout>
);
}
Example #22
| Source File: footer.js From Girscript-Community-Website with MIT License | 4 votes |
|
Footer = () => {
return (
<React.Fragment>
<footer className={style["footer"]}>
<div className={style["footer-addr"]}>
<img src={images} alt="img" height="60px" width="260px" />
<address>
<div style={{color:"#da6d28"}}><b>MAILING ADDRESS </b></div>
<i className="fas fa-map-marker-alt"></i> 123 Anywhere St., Any City, State, Country 12345
<br />
</address>
<div style={{color:"#da6d28"}}><b>EMAIL ADDRESS </b></div>
[email protected]
</div>
<ul className={style["footer-nav"]}>
<li className={style["nav-item"]}>
<h2 className={style["nav-title"]}>NAVIGATION</h2>
<ul className={style["nav-ul"]}>
<li>
<Link to="/">About Us</Link>
</li>
<li>
<Link to="/">Contact</Link>
</li>
<li>
<Link to="/">Event</Link>
</li>
<li>
<Link to="/faqs">FAQs</Link>
</li>
</ul>
</li>
<li className={style["nav-item"]}>
<h2 className={style["nav-title"]}>OTHER</h2>
<ul className={style["nav-ul"]}>
<li>
<Link to="/">Privacy Policy</Link>
</li>
<li>
<Link to="/">Terms of Use</Link>
</li>
<li>
<Link to="/">Code of Conduct</Link>
</li>
</ul>
</li>
<li className={style["nav-item"]}>
<h2 className={style["nav-title"]}>SOCIAL</h2>
<ul className={style["nav-ul"]}>
<li>Be sure to give us a follow on the below social links</li>
</ul>
<div className={`col ${style["col"]}`}>
<ul className={style["social"]}>
<li>
<a
href="https://www.facebook.com/Girlscript"
target="_blank"
rel="noopener noreferrer"
><FontAwesomeIcon icon={faFacebook} size="lg" style={{ color: "#fff" }}/>
</a>
</li>
<li>
<a
href="https://twitter.com/girlscript1"
target="_blank"
rel="noopener noreferrer"
><FontAwesomeIcon icon={faTwitter} size="lg" style={{ color: "#fff" }}/>
</a>
</li>
<li>
<a
href="mailto:[email protected]"
target="_blank"
rel="noopener noreferrer"
><FontAwesomeIcon icon={faEnvelope} size="lg" style={{ color: "#fff" }}/>
</a>
</li>
</ul>
</div>
</li>
</ul>
<div className={style["footer-dash"]}>
<div className={style["footer-text"]}>
<p>
<b>Made with <FontAwesomeIcon icon={faHeart} style={{ color: "#DB3328" }}/> by
GirlScript Community</b>
</p>
</div>
</div>
</footer>
</React.Fragment>
);
}
Example #23
| Source File: footer.js From yezz.me with MIT License | 4 votes |
|
render() {
return (
<StaticQuery
query={graphql`
query footerTitleQuery {
site {
siteMetadata {
title
}
}
}
`}
render={data => (
<>
<footer>
<div className="container py-4">
<div className="row justify-content-center mt-2">
<ul className="list-style-none">
<li className="list-inline-item ml-2">
<Link
to="header"
className="link"
smooth={true}
role="button"
aria-label="To the top"
>
<FontAwesomeIcon icon={faArrowUp} />
</Link>
</li>
<li className="list-inline-item mr-4" alt="site title">
© {new Date().getFullYear()}{" "}
<a href="/">{data.site.siteMetadata.title}.</a>
</li>
<li className="list-inline-item mr-3">
<a
href="mailto:[email protected]"
target="_blank"
rel="noreferrer"
alt="email"
>
<FontAwesomeIcon icon={faEnvelope} />
</a>
</li>
<li className="list-inline-item mr-3">
<a
href="https://github.com/yezz123"
target="_blank"
rel="noreferrer"
alt="github"
>
<FontAwesomeIcon icon={faGithub} />
</a>
</li>
<li className="list-inline-item mr-3">
<a
href="https://www.linkedin.com/in/yezz123/"
target="_blank"
rel="noreferrer"
alt="linkedin link"
>
<FontAwesomeIcon icon={faLinkedin} />
</a>
</li>
<li className="list-inline-item mr-1">
<a
href="https://twitter.com/THyasser1"
target="_blank"
rel="noreferrer"
alt="twitter link"
>
<FontAwesomeIcon icon={faTwitter} />
</a>
</li>
</ul>
</div>
</div>
</footer>
</>
)}
></StaticQuery>
)
}
Example #24
| Source File: Footer.js From Oud with MIT License | 4 votes |
|
/**
* the footer function
* @function
* @returns {JSX}
*/
function Footer() {
return (
<div>
<footer className="main-footer">
<div className="footer-middle Ffooter-middle">
<div className="container">
<div className="row">
{/* Column 1 */}
<div className="col-md-3 col-sm-6">
<Link to="/welcomeUser">
<img
data-testid="logoImage"
className="img-responsive img-resp "
src={logo}
alt="Oud logo"
/>
</Link>
</div>
{/* Column 2 */}
<div className="col-md-3 col-sm-6">
<h5
data-testid="Company"
className="font-weight-bold text-uppercase mt-3 mb-4"
>
Company
</h5>
<ul className="list-unstyled ListMain hovergold ">
<li className="ListItem">
<Link data-testid="About" to="/about">
About
</Link>
</li>
<li className="ListItem">
<Link data-testid="Features" to="/features">
Features
</Link>
</li>
<li className="ListItem">
<Link data-testid="Help" to="/help">
Help
</Link>
</li>
</ul>
</div>
{/* Column 3 */}
<div className="col-md-3 col-sm-6">
<h5
data-testid="Others"
className="font-weight-bold text-uppercase mt-3 mb-4"
>
Others
</h5>
<ul className="list-unstyled ListMain hovergold">
<li className="ListItem">
<Link data-testid="Artists" to="/forartists">
For Artists
</Link>
</li>
<li className="ListItem">
<Link data-testid="contact_us" to="/contactus">
contact us
</Link>
</li>
</ul>
</div>
{/* Column 4 */}
<div className="col-md-3 col-sm-6">
<h5
data-testid="Links"
className="font-weight-bold text-uppercase mt-3 mb-4"
>
Links
</h5>
<ul className="list-unstyled ListMain hovergold">
<li className="ListItem">
<Link data-testid="WePlayer" to="/">
Web Player
</Link>
</li>
<li className="ListItem">
<Link data-testid="MobileApp" to="/android">
Free Mobile App
</Link>
</li>
</ul>
</div>
{/* Column 5 */}
<div className="col-md-3 col-sm-6 ml-auto">
<ul className="list-unstyled ListMain list-inline text-center">
<li
data-testid="faFacebook"
className="list-inline-item fa-2x "
>
<FontAwesomeIcon icon={faFacebook} />
</li>
<li
data-testid="faTwitter"
className="list-inline-item fa-2x"
>
<FontAwesomeIcon icon={faTwitter} />
</li>
<li
data-testid="faInstagram"
className="list-inline-item fa-2x"
>
<FontAwesomeIcon icon={faInstagram} />
</li>
<li
data-testid="faYoutube"
className="list-inline-item fa-2x"
>
<FontAwesomeIcon icon={faYoutube} />
</li>
</ul>
</div>
</div>
{/* Footer Bottom */}
<div className="footer-bottom Ffooter-bottom">
<p className="text-xs-center">
©{new Date().getFullYear()} Oud - All Rights Reserved
</p>
</div>
</div>
</div>
</footer>
<div></div>
</div>
);
}
