react-icons/fa#FaFacebookSquare JavaScript Examples

SocialLinks = ({ contacts }) => {
    return (
        <div className="sidebar-social-links">
            <a className="text-secondary p-2"
                href={contacts.facebook}>
                <span title="Facebook">
                    <FaFacebookSquare size={26} style={{ color: "secondary" }} />
                </span>
            </a>
            <a className="text-secondary p-2"
                href={contacts.github}>
                <span title="GitHub">
                    <FaGithubSquare size={26} style={{ color: "secondary" }} />
                </span>
            </a>
        </div>
    )
}

data = [
  {
    id: 1,
    icon: <FaFacebookSquare className="social-icon"></FaFacebookSquare>,
    url: "https://www.twitter.com",
  },
  {
    id: 2,
    icon: <FaLinkedin className="social-icon"></FaLinkedin>,
    url: "https://www.twitter.com",
  },
  {
    id: 3,
    icon: <FaDribbbleSquare className="social-icon"></FaDribbbleSquare>,
    url: "https://www.twitter.com",
  },
  {
    id: 4,
    icon: <FaBehanceSquare className="social-icon"></FaBehanceSquare>,
    url: "https://www.twitter.com",
  },
  {
    id: 5,
    icon: <FaTwitterSquare className="social-icon"></FaTwitterSquare>,
    url: "https://www.twitter.com",
  },
]

SocialLinks = ({ styleClass }) => {
  return (
    <ul className={styleClass}>
      <li>
        <a href="https://twitter.com">
          <FaFacebookSquare className="social-icon facebook-icon"></FaFacebookSquare>
        </a>
      </li>
      <li>
        <a href="https://twitter.com">
          <FaDribbbleSquare className="social-icon dribble-icon"></FaDribbbleSquare>
        </a>
      </li>
      <li>
        <a href="https://twitter.com">
          <FaTwitterSquare className="social-icon twitter-icon"></FaTwitterSquare>
        </a>
      </li>
    </ul>
  )
}

LandingPage = () => {
  const classes = useStyles();
  const { loginWithRedirect } = useAuth0();
  return (
    <IconContext.Provider value={{ color: "white", size: "3rem" }}>
      <NavBar />
      <Container className={classes.container}>
        <div className={classes.box}>
          <Typography className={classes.typography}>
            Your home for Angel City Sports events and more!
          </Typography>
          <img
            className={classes.bannerImg}
            src={landingImage}
            alt="Angel City Sports"
          />
        </div>
      </Container>
      <Container className={classes.contentContainer}>
        <Box className={classes.contentIntro}>
          <Typography variant="subtitle2">Sign Up Now!</Typography>
          <Typography className={classes.contentP}>
            Sign Up Now with Facebook or Google, add your profile info, and keep
            track of Angel City Sports Games, Clinics, and other events! All the
            info you need is all in one place - The Angel City Sports App.
          </Typography>
        </Box>
        <Box className={classes.btnContainer}>
          <Button
            className={classes.btn1}
            onClick={() => loginWithRedirect({})}
          >
            <FaFacebookSquare className={classes.icon} />
            <p>Sign up with Facebook</p>
          </Button>
          <Button
            className={classes.btn2}
            onClick={() => loginWithRedirect({})}
          >
            <FaGoogle className={classes.icon} />
            <p>Sign up with Google</p>
          </Button>
          <Link
            to="privacy-policy"
            style={{ padding: "0" }}
            className={classes.privacyLink}
          >
            <p>Privacy Policy</p>
          </Link>
        </Box>
        <Link to="accessibility" className={classes.a11yLink}>
          Accessibility Statement
        </Link>
      </Container>
    </IconContext.Provider>
  );
}

Header = ({ children, title, date, subtitle, cover, socialDetails, likeEnabled }) => (
  <Wrapper>
    <Helmet>
      <script src="//w.likebtn.com/js/w/widget.js"></script>
    </Helmet>
    {cover && typeof cover === 'object' &&
      <Img fluid={cover || {} || [] || ''} />
    }
    {cover && typeof cover === 'string' &&
      <img src={cover || {} || [] || ''} style={{ width: '100%', objectFit: 'fill', objectPosition: '50% 50%' }} />
    }
    <Text>

 {likeEnabled &&
        <img src={likeEnabled.storeProfileImage} title={title} alt={title} style={{ 'margin-top': '4rem', 'max-height': '80px', 'textAlign': 'center', 'borderRadius': '0%' }} />
      }
      {likeEnabled &&
        <span
          className="likebtn-wrapper"
          data-theme="custom"
          data-icon_l="str1-o"
          data-icon_d="sgn9-f"
          data-icon_l_c="rgb(55,24,71)"
          data-icon_l_c_v="rgb(192,76,253)"
          data-icon_d_c="rgb(55,24,71)"
          data-icon_d_c_v="rgba(253,76,97,0.88)"
          data-bg_c="#ffffff"
          data-bg_c_v="#ffffff"
          data-f_family="Courier New"
          data-i18n_like="favorite"
          data-ef_voting="bounce"
          data-white_label="true"
          data-rich_snippet="true"
          data-identifier={likeEnabled.storeName}
          data-counter_count="true"
          data-popup_disabled="true"
          data-share_enabled="false"
          data-addthis_pubid="ra-5f7b9ff19ad7a3f6"
          data-item_url={likeEnabled.storeURL}
          data-item_title={likeEnabled.storeName}
          data-item_image={likeEnabled.storeProfileImage}
          data-lazy_load="false"
          data-tooltip_enabled="false"
          data-site_id="5f795f90943ec9bf477cbfbe"
        >
        </span>
      }
      <h3 style={{ 'margin-bottom': '0.5rem'}}>{title}</h3>
            <h4>{subtitle}</h4>
      {socialDetails &&
        <SocialIcons>
          {socialDetails.InstagramLink &&
            <a href={socialDetails.InstagramLink} target="_blank"><FaInstagram size="32" color="black" /></a>
          }
          {socialDetails.FacebookLink &&
            <a href={socialDetails.FacebookLink} target="_blank"><FaFacebookSquare size="32" color="black" /></a>
          }
          {socialDetails.PinterestLink &&
            <a href={socialDetails.PinterestLink} target="_blank"><FaPinterestSquare size="32" color="black" /></a>
          }
          {socialDetails.TwitterLink &&
            <a href={socialDetails.TwitterLink} target="_blank"><FaTwitterSquare size="32" color="black" /></a>
          }
          {socialDetails.YouTubeLink &&
            <a href={socialDetails.YouTubeLink} target="_blank"><FaYoutube size="32" color="black" /></a>
          }
        </SocialIcons>
      }

      {children && <Subtitle dangerouslySetInnerHTML={{ __html: children }} />}
    </Text>
  </Wrapper>
)