react-feather#GitHub JavaScript Examples

The following examples show how to use react-feather#GitHub. 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: Header.js    From popper.js.org with MIT License 6 votes vote down vote up
Header = () => (
  <HeaderStyled>
    <picture>
      <source
        srcset={popperLogoOutlined}
        media="(prefers-color-scheme: dark)"
      />
      <source
        srcset={popperLogo}
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
      />
      <Logo src={popperLogo} alt="Popper logo" draggable="false" width="200" height="200" />
    </picture>

    <Slogan>
      Tooltip &amp; Popover <br /> Positioning Engine
    </Slogan>
    <SubSlogan>
      Weighs just <strong>3 kB!</strong>
    </SubSlogan>
    <div
      css={css`
        margin-top: 30px;
      `}
    >
      <a
        css={buttonCss}
        href="https://github.com/popperjs/popper-core"
        rel="nofollow noreferrer"
      >
        <GitHub css={iconCss} /> Star on GitHub
      </a>
      <Link to="/docs/v2/" css={buttonCss}>
        <Terminal css={iconCss} />
        Documentation
      </Link>
    </div>
  </HeaderStyled>
)
Example #2
Source File: Social.js    From covid19 with MIT License 6 votes vote down vote up
Social = ({ text }) => (
  <section>
    <ShareButton href={twitterURL(text, url)} service="Twitter">
      <Twitter />
    </ShareButton>
    <ShareButton href={facebookURL(url)} service="Facebook">
      <Facebook />
    </ShareButton>
    <a href="https://github.com/lachlanjc/covid19">
      <GitHub />
    </a>
    <style jsx>{`
      section {
        display: flex;
        justify-content: center;
        margin-bottom: 1rem;
      }
      section :global(a) {
        display: inline-block;
        text-decoration: none;
        padding-left: 0.5rem;
        margin-right: 2rem;
        color: ${theme.colors.red};
      }
    `}</style>
  </section>
)
Example #3
Source File: GitHubStars.jsx    From vertx-web-site.github.io with Apache License 2.0 6 votes vote down vote up
GitHubStars = ({ org, repo, fallbackValue, button }) => {
  const url = `https://api.github.com/repos/${org}/${repo}`
  const [stars, setStars] = useState(fallbackValue)

  useEffect(() => {
    async function fetchStars() {
      let response = await fetch(url)
      let json = await response.json()
      setStars(json.stargazers_count)
    }
    fetchStars()
  }, [url])

  let label
  if (stars !== undefined) {
    if (stars >= 1000) {
      label = Math.floor(stars / 1000) + "K+ stars"
    } else {
      label = stars + " stars"
    }
  }

  let icon = <GitHub />

  return (
    <>
      <Head>
        <link rel="preload" href={url} as="fetch" crossOrigin="anonymous" />
      </Head>
      <div className="github-stars">
        <a href={`https://github.com/${org}/${repo}`}>
          {button ? <Button icon={icon}>{label}</Button> : <><div className="icon">{icon}</div> {label}</>}
        </a>
      </div>
      <style jsx>{styles}</style>
    </>
  )
}
Example #4
Source File: Footer.js    From webDevsCom with MIT License 5 votes vote down vote up
Footer = () => {
  return (
    <footer className='footer'>
      <ReactTooltip type='light' />
      <p className='has-text-centered is-size-4 has-text-grey-light'>• • •</p>
      <div className='column'>
        <div className='buttons is-centered'>
          <a
            href='https://www.facebook.com/binu.kumar.90857'
            target='_blank'
            rel='noopener noreferrer'
            className='button button-special is-rounded box-shadow-lift'
            data-tip='connect on Facebook ?‍♂'
          >
            <Facebook color='blue' className='icon' />
          </a>
          <a
            href='https://www.instagram.com/krbinu42/'
            target='_blank'
            rel='noopener noreferrer'
            className='button button-special is-rounded box-shadow-lift'
            data-tip='connect on Instagram ?'
          >
            <Instagram color='#C74B91' className='icon' />
          </a>
          <a
            href='https://github.com/Binu42'
            target='_blank'
            rel='noopener noreferrer'
            className='button button-special is-rounded box-shadow-lift'
            data-tip='connect on Github ❤️'
          >
            <GitHub className='icon' />
          </a>
          <a
            href='https://twitter.com/kbinu42'
            target='_blank'
            rel='noopener noreferrer'
            className='button button-special is-rounded box-shadow-lift'
            data-tip='connect on Twitter ?‍♂️'
          >
            <Twitter color='#1DA1F2' className='icon' />
          </a>
          <a
            href='https://www.linkedin.com/in/binukumar/'
            target='_blank'
            rel='noopener noreferrer'
            className='is-hidden-touch button button-special is-rounded box-shadow-lift'
            data-tip='connect on Linkedin ?‍⚖️'
          >
            <Linkedin color='#0077B5' className='icon' />
          </a>
        </div>
      </div>
      {/* <div className='column has-text-centered'>
        <p className='subtitle is-7 is-capitalized has-text-danger'>
          This Project is just for Learning and teaching purposes.
        </p>
      </div> */}
      <div className='column has-text-centered'>
        <p className='menu-label'>
          Made with <Heart color='red' fill='red' size='15px' />{' '}
          <a
            href='https://binu42.netlify.com'
            target='_blank'
            rel='noopener noreferrer'
          >
            By Binu Kumar
          </a>{' '}
          <br />
          &copy;{new Date().getFullYear()}
        </p>
      </div>
    </footer>
  );
}
Example #5
Source File: HeroSec.js    From webDevsCom with MIT License 5 votes vote down vote up
HeroSec = () => {
  return (
    <div style={{ minHeight: "100vh" }}>
      <section className="section">
        <div className="container">
          <div className="column has-text-centered is-hidden-touch">
            <p className="title fadeInUp" style={{ animationDelay: "0.25s" }}>
              <span style={{ fontSize: "5rem" }}>
                Hello Developer, welcome home!
              </span>
            </p>
            <p
              className="subtitle is-3 has-text-grey fadeInUp"
              style={{ animationDelay: ".5s" }}
            >
              We have collected over 1000+ free resources to make your
              development journey hassle free Enjoy the experience.
            </p>
            <Contributor />
            <div className="column fadeInUp" style={{ animationDelay: "1s" }}>
              <a
                href="https://github.com/WebDevsCom/webDevsCom"
                className="button button-special box-shadow-lift is-large is-rounded"
                target="_blank"
                rel="noopener noreferrer"
              >
                <GitHub /> <span> &emsp;open sourced on GitHub</span>
              </a>
            </div>
          </div>

          <div className="column has-text-centered is-hidden-desktop">
            <p
              className="title is-2 fadeInUp"
              style={{ animationDelay: ".25s" }}
            >
              Hello Developer, welcome home!
            </p>
            <p
              className="subtitle has-text-grey is-5 fadeInUp"
              style={{ animationDelay: ".5s" }}
            >
              We have collected over 1000+ free resources to make your
              development journey hassle free Enjoy the experience.
            </p>
            <Contributor />
            <div className="column fadeInUp" style={{ animationDelay: "1s" }}>
              <a
                href="https://github.com/WebDevsCom/webDevsCom"
                className="button button-special box-shadow-lift is-large is-rounded"
                target="_blank"
                rel="noopener noreferrer"
              >
                <GitPullRequest /> <span> &emsp;Github</span>
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
Example #6
Source File: Footer.js    From covid19india-react with MIT License 5 votes vote down vote up
function Footer() {
  const {t} = useTranslation();

  return (
    <footer>
      <div className="link">
        <a
          href="https://github.com/covid19india"
          target="_blank"
          rel="noopener noreferrer"
        >
          covid19india
        </a>
      </div>

      <h5>{t('We stand with everyone fighting on the frontlines')}</h5>

      <div className="links">
        <a
          href="https://github.com/covid19india/covid19india-react"
          className="github"
          target="_blank"
          rel="noopener noreferrer"
        >
          <GitHub />
        </a>

        <a
          className="api"
          href={API_DOMAIN}
          target="_blank"
          rel="noopener noreferrer"
        >
          <Database />
        </a>

        <a
          href="https://t.me/covid19indiaorg"
          className="telegram"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Send />
        </a>

        <a
          href="https://twitter.com/covid19indiaorg"
          target="_blank"
          rel="noopener noreferrer"
          className="twitter"
        >
          <Twitter />
        </a>

        <a
          href="https://instagram.com/covid19indiaorg"
          target="_blank"
          rel="noopener noreferrer"
          className="instagram"
        >
          <Instagram />
        </a>

        <a
          href="mailto:[email protected]"
          className="mail"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Mail />
        </a>
      </div>
    </footer>
  );
}
Example #7
Source File: Volunteers.js    From covid19india-react with MIT License 5 votes vote down vote up
function Member({className, style, name, bio, link, image, socials = {}}) {
  const [loaded, setLoaded] = useState(false);

  const socialIcons = useMemo(
    () => ({
      github: <GitHub size={16} />,
      linkedin: <Linkedin size={16} />,
      twitter: <Twitter size={16} />,
      instagram: <Instagram size={16} />,
    }),
    []
  );

  return (
    <animated.div className={classnames('Member', className)} {...{style}}>
      {link && <a href={link} target="_blank" rel="noopener noreferrer"></a>}
      {!loaded && (
        <div className="image">
          <ContentLoader
            backgroundColor="#888"
            foregroundColor="#888"
            backgroundOpacity={0.2}
            foregroundOpacity={0.4}
          >
            <rect x="0" y="0" width="256" height="256" />
          </ContentLoader>
        </div>
      )}
      <img
        className="image"
        src={`${VOLUNTEERS_DOMAIN}/images/${image ? image : PLACEHOLDER_IMG}`}
        alt={name}
        onLoad={setLoaded.bind(this, true)}
        style={{display: loaded ? 'block' : 'none'}}
      />
      <div className="details">
        <h2 className="name">{name}</h2>
        <p className="bio">{bio}</p>
        <div className="socials">
          {Object.entries(socialIcons).map(
            ([social, icon]) =>
              socials[social] && (
                <a
                  key={social}
                  className={classnames('icon', social)}
                  href={socials[social]}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {icon}
                </a>
              )
          )}
        </div>
      </div>
      {link && (
        <div className="link-external">
          <ExternalLink size={16} />
        </div>
      )}
    </animated.div>
  );
}
Example #8
Source File: Layout.js    From hivemind with Apache License 2.0 4 votes vote down vote up
Layout = ({ children }) => {
  const [isOpen, setOpen] = useState(false)
  const [dropdownOpen, setDropdownOpen] = useState(false)
  const { pageVars } = useContext(GlobalContext)
  const notifyRef = useCallback((node) => {
    if (typeof window !== 'undefined') {
      if (node) {
        window.notify = node.notificationAlert.bind(node)
      } else {
        window.notify = null
      }
    }
  }, [])

  function toggleCollapse() {
    setOpen(!isOpen)
  }

  function toggleDropdown() {
    setDropdownOpen(!dropdownOpen)
  }

  return (
    <Container fluid>
      <Head>
        <script type="text/javascript" src="/js/pace.min.js" async />
        <title>{pageVars.title}</title>
        <link
          rel="apple-touch-icon"
          sizes="57x57"
          href="/img/logo/apple-icon-57x57.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="60x60"
          href="/img/logo/apple-icon-60x60.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="72x72"
          href="/img/logo/apple-icon-72x72.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="76x76"
          href="/img/logo/apple-icon-76x76.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="114x114"
          href="/img/logo/apple-icon-114x114.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="120x120"
          href="/img/logo/apple-icon-120x120.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="144x144"
          href="/img/logo/apple-icon-144x144.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="152x152"
          href="/img/logo/apple-icon-152x152.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href="/img/logo/apple-icon-180x180.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="192x192"
          href="/img/logo/android-icon-192x192.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="/img/logo/favicon-32x32.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="96x96"
          href="/img/logo/favicon-96x96.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="16x16"
          href="/img/logo/favicon-16x16.png"
        />
        <link rel="manifest" href="/img/logo/manifest.json" />
        <meta name="msapplication-TileColor" content="#ffffff" />
        <meta
          name="msapplication-TileImage"
          content="/img/logo/ms-icon-144x144.png"
        />
        <meta name="theme-color" content="#ffffff" />
      </Head>
      <Navbar color="inverse" light expand="md" className="border-bottom mb-2">
        <Link href="/" passHref>
          <ForwardedNavbarBrand className="text-wrap">
            <img
              src="/img/logo/Logo.svg"
              style={{ height: '35px' }}
              alt="Logo"
            />
            &nbsp;
          </ForwardedNavbarBrand>
        </Link>
        <NavbarToggler onClick={toggleCollapse} />
        <Collapse isOpen={isOpen} navbar>
          <MainNav />
          <Nav className="ml-auto" navbar>
            <NavItem>
              <NavbarText>
                <Spinner
                  type="grow"
                  color="dark"
                  id={'loading'}
                  className={'invisible mx-2'}
                />
              </NavbarText>
            </NavItem>
            <NavItemUser />
            <Dropdown
              nav
              inNavbar
              isOpen={dropdownOpen}
              toggle={toggleDropdown}
            >
              <DropdownToggle nav caret>
                <HelpCircle /> Help
              </DropdownToggle>
              <DropdownMenu right>
                <DropdownItem>
                  <Link href={'/help'} passHref>
                    <NavLink>
                      <Info /> User Guide
                    </NavLink>
                  </Link>
                </DropdownItem>
                <DropdownItem divider />
                <DropdownItem>
                  <NavLink
                    href={'https://github.com/adityamukho/hivemind/discussions'}
                    target="_blank"
                  >
                    <MessageCircle /> Ask a Question (Hivemind)
                  </NavLink>
                </DropdownItem>
                <DropdownItem>
                  <NavLink
                    href={'https://gitter.im/recallgraph/community'}
                    target="_blank"
                  >
                    <MessageCircle /> Ask a Question (RecallGraph)
                  </NavLink>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <NavItem>
              <NavLink
                href="https://github.com/adityamukho/hivemind"
                target="_blank"
              >
                <GitHub />
              </NavLink>
            </NavItem>
            <NavItemLogin />
          </Nav>
        </Collapse>
      </Navbar>
      <Container fluid>
        <NotificationAlert ref={notifyRef} />
        <Row>
          <Col>{children}</Col>
        </Row>
      </Container>
    </Container>
  )
}