react-feather#ExternalLink JavaScript Examples

The following examples show how to use react-feather#ExternalLink. 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: DocsIndex.jsx    From vertx-web-site.github.io with Apache License 2.0 6 votes vote down vote up 
Section = ({ icon, children, id, name }) => {
  let numChildren = 1
  if (Array.isArray(children)) {
    numChildren = Math.min(2, children.length)
  }

  let book = undefined
  if (id === "core") {
    let url = "https://www.manning.com/books/vertx-in-action"
    book = (
      <div className="docs-index-section-book">
        <a href={url} target="_blank" rel="noopener noreferrer">
          <img src={require("../../assets/book-cover-medium.jpg")} width="230"
            alt="Vert.x in Action book cover" />
        </a><br />
        <a href={url} target="_blank" rel="noopener noreferrer">
          Get the book ... <ExternalLink className="external-link-icon" size="1em" />
        </a>
      </div>
    )
  }

  return (
    <section className="docs-index-section" id={id}>
      <div className="docs-index-section-wrapper">
        <div className="docs-index-section-header">
          <h3>{icon} {name}</h3>
        </div>
        <div className={`docs-index-section-content docs-index-section-content-${numChildren}`}>
          {children}
        </div>
      </div>
      {book}
    </section>
  )
}
Example #2
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 #3
Source File: index.js    From cardano-documentation with MIT License 5 votes vote down vote up 
SidebarLayout = ({ location }) => (
  <StaticQuery
    query={graphql`
      query {
        allMdx {
          edges {
            node {
              fields {
                slug
                title
              }
            }
          }
        }
      }
    `}
    render={({ allMdx }) => {
      return (
        <Sidebar>
          {config.sidebar.title ? (
            <div
              className={'sidebarTitle hiddenMobile'}
              dangerouslySetInnerHTML={{ __html: config.sidebar.title }}
            />
          ) : null}
          <ul className={'sideBarUL'}>
            <Tree edges={allMdx.edges} />
            {config.sidebar.links && config.sidebar.links.length > 0 && (
              <Divider />
            )}
            {config.sidebar.links.map((link, key) => {
              if (link.link !== '' && link.text !== '') {
                return (
                  <ListItem key={key} to={link.link}>
                    {link.text}
                    <ExternalLink size={14} />
                  </ListItem>
                )
              }
            })}
          </ul>
        </Sidebar>
      )
    }}
  />
)
Example #4
Source File: index.js    From learningHub with MIT License 5 votes vote down vote up 
SidebarLayout = ({ location }) => (
  <StaticQuery
    query={graphql`
      query {
        allMdx {
          edges {
            node {
              fields {
                slug
                title
              }
            }
          }
        }
      }
    `}
    render={({ allMdx }) => {
      return (
        <Sidebar>
          {config.sidebar.title ? (
            <div
              className={'sidebarTitle hiddenMobile'}
              dangerouslySetInnerHTML={{ __html: config.sidebar.title }}
            />
          ) : null}
          <ul className={'sideBarUL'}>
            <Tree edges={allMdx.edges} />
            {config.sidebar.links && config.sidebar.links.length > 0 && <Divider />}
            {config.sidebar.links.map((link, key) => {
              if (link.link !== '' && link.text !== '') {
                return (
                  <ListItem key={key} to={link.link}>
                    {link.text}
                    <ExternalLink size={14} />
                  </ListItem>
                );
              }
            })}
          </ul>
        </Sidebar>
      );
    }}
  />
)
Example #5
Source File: NavBar.jsx    From vertx-web-site.github.io with Apache License 2.0 4 votes vote down vote up 
NavBar = () => {
  const refNavBar = useRef()
  const refRight = useRef()
  const [collapse, setCollapse] = useState(false)
  const [rightMaxHeight, setRightMaxHeight] = useState(undefined)
  const setNavBarState = useContext(NavBarContext.Dispatch)
  const currentVersion = useContext(VersionContext.State)

  useEffect(() => {
    function updateHeight() {
      let height = refNavBar.current.clientHeight
      setNavBarState({ height })
    }

    updateHeight()

    let throttledUpdateheight = throttle(updateHeight, 100)
    window.addEventListener("resize", throttledUpdateheight)

    return () => {
      window.removeEventListener("resize", throttledUpdateheight)
    }
  }, [setNavBarState])

  const onClick = () => {
    let height = 0
    for (let c of refRight.current.children) {
      height += c.offsetHeight
    }

    if (collapse) {
      setCollapse(false)
      setRightMaxHeight(undefined)
    } else {
      setCollapse(true)
      setRightMaxHeight(height)
    }
  }

  return (
    <div className="navbar" ref={refNavBar}>
      <div className="navbar-content container">
        <div className="navbar-logo">
          <Link href="/">
            <a><img src={require("../assets/logo.svg")} alt="Vert.x Logo" /></a>
          </Link>
        </div>

        <div className="navbar-collapse-button" onClick={onClick}>
          <span></span>
          <span></span>
          <span></span>
        </div>

        <div className={classNames("navbar-right", { collapse })}
            ref={refRight} style={{ maxHeight: rightMaxHeight }}>
          <div className="navbar-menu">
            <span className="navbar-menu-item with-drop-down">
              <DropDown title="Start">
                <Link href="/introduction-to-vertx-and-reactive/">
                  <a><DropDownItem>Intro to reactive</DropDownItem></a>
                </Link>
                <Link href="/get-started/">
                  <a><DropDownItem>Get started</DropDownItem></a>
                </Link>
                <a href="https://start.vertx.io/" target="_blank" rel="noreferrer">
                  <DropDownItem>App generator <ExternalLink className="external-link-icon"
                    size="1em" /></DropDownItem>
                </a>
              </DropDown>
            </span>
            {currentVersion.version ? (
              <Link href={`/docs/${currentVersion.version}/`}>
                <a className="navbar-menu-item">Docs</a>
              </Link>
            ) : (
              <Link href="/docs/">
                <a className="navbar-menu-item">Docs</a>
              </Link>
            )}
            <span className="navbar-menu-item with-drop-down">
              <DropDown title="Resources">
                <Link href="/faq/">
                  <a><DropDownItem>FAQ</DropDownItem></a>
                </Link>
                <Link href="/channels/">
                  <a><DropDownItem>Channels</DropDownItem></a>
                </Link>
                <a href="https://how-to.vertx.io/" target="_blank" rel="noreferrer">
                  <DropDownItem>How-To’s <ExternalLink className="external-link-icon"
                    size="1em" /></DropDownItem>
                </a>
                <a href="https://github.com/vert-x3/vertx-eventbus-bridge-clients" target="_blank" rel="noreferrer">
                  <DropDownItem>EventBus Bridge Clients <ExternalLink className="external-link-icon"
                    size="1em" /></DropDownItem>
                </a>
                <a href="https://github.com/vert-x3/advanced-vertx-guide" target="_blank" rel="noreferrer">
                  <DropDownItem>Advanced Vert.x Guide <ExternalLink className="external-link-icon"
                    size="1em" /></DropDownItem>
                </a>
              </DropDown>
            </span>
            <Link href="/blog/">
              <a className="navbar-menu-item">Blog</a>
            </Link>
            <Link href="/community/">
              <a className="navbar-menu-item">Community</a>
            </Link>
          </div>

          <div className="navbar-social">
            <Tooltip title="Awesome Vert.x">
              <a href="https://github.com/vert-x3/vertx-awesome" className="navbar-social-link" target="_blank" rel="noopener noreferrer">
                <SimpleIcon icon={siAwesomelists} aria-label="List of awesome Vert.x projects" title="" />
              </a>
            </Tooltip>
            <Tooltip title="Stack Overflow">
              <a href="https://stackoverflow.com/questions/tagged/vert.x" className="navbar-social-link" target="_blank" rel="noopener noreferrer">
                <SimpleIcon icon={siStackoverflow} aria-label="Stack Overflow questions related to Vert.x" title="" />
              </a>
            </Tooltip>
            <Tooltip title="YouTube">
              <a href="https://www.youtube.com/channel/UCGN6L3tRhs92Uer3c6VxOSA" className="navbar-social-link" target="_blank" rel="noopener noreferrer">
                <SimpleIcon icon={siYoutube} aria-label="YouTube channel of Vert.x" title="" />
              </a>
            </Tooltip>
            <Tooltip title="Discord">
              <a href="https://discord.gg/6ry7aqPWXy" className="navbar-social-link" target="_blank" rel="noopener noreferrer">
                <SimpleIcon icon={siDiscord} aria-label="Eclipse Vert.x channel on Discord" title="" />
              </a>
            </Tooltip>
            <Tooltip title="Vert.x User Group">
              <a href="https://groups.google.com/forum/?fromgroups#!forum/vertx" className="navbar-social-link" target="_blank" rel="noopener noreferrer">
                <SimpleIcon icon={siGooglemessages} aria-label="A Google group for Vert.x users" title="" />
              </a>
            </Tooltip>
          </div>
        </div>
      </div>
      <style jsx>{styles}</style>
    </div>
  )
}