@fortawesome/free-brands-svg-icons#faTwitter JavaScript Examples

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>&#169; 1991 - {new Date().getFullYear()} All rights reserved.</div>
    </div>
  )
}

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>
)

/**
 * 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>
  );
}

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>
    );
}

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,
);

library.add(
  faBars,
  faTimes,
  faChevronDown,
  faChevronUp,
  faCalendarAlt,
  faTelegramPlane,
  faTwitter,
  faMediumM,
  faRedditAlien,
  faQuestionCircle,
  faCheck,
  faSearch,
);

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>
    )
}

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>
  )
}

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>
  )
}

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);
}

TwitterIcon = makeFAIcon(faTwitter)

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" }
]

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>
  );
}

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>
  );
}

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>
  )
}

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>
  )
}

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>
  )
}

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>)
}

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>
  )
}

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>
    );
  }

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&nbsp;
            <FontAwesomeIcon icon={faEnvelope} />
          </h2>
          <p>
            If you'd like to say "hi" or want to talk, feel free to reach me at
            &nbsp;
            <a
              href="#mailgo"
              data-address="hellopaigen"
              data-domain="gmail.com"
            >
              hellopaigen&nbsp;@&nbsp;gmail.com
            </a>
            .
          </p>
        </section>
        <section>
          <h2>
            Follow me & chat on social media&nbsp;
            <FontAwesomeIcon icon={faTwitter} />
          </h2>
          <ul>
            <li>
              I'm on Twitter at&nbsp;
              <a
                href="https://twitter.com/pniedri"
                target="_blank"
                rel="noopener noreferrer"
              >
                @pniedri
              </a>
            </li>
            <li>
              I publish on&nbsp;
              <a
                href="https://paigen11.medium.com"
                target="_blank"
                rel="noopener noreferrer"
              >
                Medium
              </a>
              &nbsp;and&nbsp;
              <a
                href="https://dev.to/paigen11"
                target="_blank"
                rel="noopener noreferrer"
              >
                DEV
              </a>
              &nbsp;under @paigen11.
            </li>
            <li>
              And I've started sharing my IoT projects on&nbsp;
              <a
                href="https://www.hackster.io/paige-niedringhaus"
                target="_blank"
                rel="noopener noreferrer"
              >
                Hackster.io
              </a>
              &nbsp;too.
            </li>
          </ul>
        </section>
        <section>
          <h2>
            Check out my Github profile&nbsp;
            <FontAwesomeIcon icon={faGithub} />
          </h2>
          <p>
            All of the&nbsp;
            <a
              href="https://github.com/paigen11"
              target="_blank"
              rel="noopener noreferrer"
            >
              projects
            </a>
            &nbsp; 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&nbsp;
            <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>
  );
}

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>
  );
}

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">
                      &copy; {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>
    )
  }

/**
 * 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">
                &copy;{new Date().getFullYear()} Oud - All Rights Reserved
              </p>
            </div>
          </div>
        </div>
      </footer>

      <div></div>
    </div>
  );
}