react-icons/fa#FaDiscord JavaScript Examples

The following examples show how to use react-icons/fa#FaDiscord. 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: Navbar.js    From ytx-card-game with MIT License 6 votes vote down vote up 
function Navbar() {

  const [open, setOpen] = useState(false)
  const [active, setActive] = useState(0)

  const handleClick = e => {
    const index = parseInt(e.target.id, 0);
    if (index !== active) {
      setActive(index);
    }
  };
  return (
    <Nav>
      <Logo src={logo} />
      <HamburgerMenu
        isOpen={open}
        menuClicked={() => setOpen(!open)}
        width={24}
        height={18}
        strokeWidth={2}
        rotate={0}
        color='#fff'
        borderRadius={0}
        animationDuration={0.5}
      />
      <NavMenu open={open}>
        <Li onClick={handleClick} active={active === 0} id={0}>Home</Li>
        <Li onClick={handleClick} active={active === 1} id={1}>NFT Minting dApp</Li>
        <Li onClick={handleClick} active={active === 2} id={2}>YTX Card Game</Li>
        <Li><FaDiscord size={27} color={"#a7a7a7"} /></Li>
        <Li><FaGithub size={27} color={"#a7a7a7"} /></Li>
        <Li><CgFileDocument size={27} color={"#a7a7a7"} /></Li>
        <Li><a href="#!">Connect Wallet</a></Li>
      </NavMenu>
    </Nav>
  )
}
Example #2
Source File: Footer.js    From Athavani with MIT License 4 votes vote down vote up 
Footer = () => {
  const scrollTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <React.Fragment>
      <footer className="footer">
        <div className="footer-addr">
          <h1 className="footer-logo">About Athavani</h1>
          <div className="info">
            Athavani/Memories is a place to save all your memories in a single
            place and rejoice them through the years. We assures you that your
            data will remain safe in Athavani.
          </div>
        </div>
        <ul className="footer-nav">
          <li className="social-box" style={{ width: "100%" }}>
            <h2 className="title">Social</h2>
            <ul className="ul-links">
              <p
                style={{
                  fontSize: "1.1rem",
                  margin: "0",
                  fontWeight: "600",
                }}
              >
                Do follow us on social platforms
              </p>
            </ul>
            <div className="col col">
              <ul className="social">
                <li>
                  <a href="#" rel="noopener noreferrer">
                    <div className="outer">
                      <FaTwitter
                        className="fab fa-twitter"
                        style={{ fontSize: "2.2em" }}
                      />
                    </div>
                  </a>
                </li>
                <li>
                  <a
                    href="https://github.com/Tejas1510/Athavani"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <div className="outer">
                      <FaGithubAlt
                        className="fab fa-github"
                        style={{ fontSize: "2.2em" }}
                      />
                    </div>
                  </a>
                </li>
                <li>
                  <a
                    href="https://discord.gg/gEqSYzc5Yu"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <div className="outer">
                      <FaDiscord
                        className="fab fa-discord"
                        style={{ fontSize: "2.2em" }}
                      />
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
        <div className="footer-dash footer-dash-dark">
          <div className="footer-text footer-text-dark">
            <p style={{ margin: "10px 0px", fontWeight: "700" }}>
              Copyright © Athavani 2021
            </p>
          </div>
        </div>
      </footer>
    </React.Fragment>
  );
}