components#Link TypeScript Examples

PoweredBy: React.FC<unknown> = () => {
  return (
    <div className="powered-by">
      <Text mb={0} font="14px" type="secondary">
        Geist is an open source project from the community.
      </Text>
      <Text mt={0} font="14px" type="secondary">
        And is powered by{' '}
        <Link color target="_blank" rel="noreferrer nofollow" href="/powered-by-netlify">
          Netlify
        </Link>
        .
      </Text>
      <style jsx>{`
        .powered-by {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          margin-top: 30px;
        }
      `}</style>
    </div>
  )
}

HybridLink: React.FC<HybridLinkProps> = ({ href = '#', children, ...props }) => {
  const isRelativeUrl = !/^([a-z0-9]*:|.{0})\/\/.*$/gim.test(href)
  const { pathname } = useRouter()
  const isHomePage = pathname.includes('guide/introduction')

  if (isRelativeUrl) {
    return (
      <NextLink href={href} passHref>
        <Link color block {...props}>
          {children}
        </Link>
      </NextLink>
    )
  }

  return (
    <Link
      href={href}
      target="_blank"
      color
      icon={!isHomePage}
      rel="noreferrer nofollow"
      {...props}>
      {children}
    </Link>
  )
}

describe('Link', () => {
  it('should render correctly', () => {
    const wrapper = mount(
      <div>
        <Link href="https://geist-ui.dev">link</Link>
        <Link href="https://geist-ui.dev" color>
          link
        </Link>
        <Link href="https://geist-ui.dev" icon>
          link
        </Link>
        <Link href="https://geist-ui.dev" underline>
          link
        </Link>
        <Link href="https://geist-ui.dev" block>
          link
        </Link>
      </div>,
    )
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should be no errors when href missing', () => {
    const errorSpy = jest.spyOn(console, 'error')
    const wrapper = mount(<Link />)
    expect(errorSpy).not.toHaveBeenCalled()
    expect(() => wrapper.unmount()).not.toThrow()
    errorSpy.mockRestore()
  })

  it('should forward ref', () => {
    let ref = React.createRef<HTMLAnchorElement>()
    const errorSpy = jest.spyOn(console, 'error')
    const wrapper = mount(<Link ref={ref} />)

    expect(errorSpy).not.toHaveBeenCalled()
    expect(ref.current).not.toBeNull()
    expect(() => wrapper.unmount()).not.toThrow()
    errorSpy.mockRestore()
  })

  it('an warning should be thrown when using the pure prop', () => {
    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
    mount(<Link pure />)
    expect(errorSpy).toHaveBeenCalled()
    errorSpy.mockRestore()
  })
})

Contributors: React.FC<Props> = ({ path }) => {
  const { isChinese } = useConfigs()
  const [users, setUsers] = useState<Array<Contributor>>([])
  const link = useMemo(() => `${RepoMasterURL}/${path || '/pages'}`, [])

  useEffect(() => {
    let unmount = false
    ;(async () => {
      const contributors = await getContributors(path)
      if (unmount) return
      setUsers(contributors)
    })()
    return () => {
      unmount = true
    }
  }, [])

  return (
    <div className="contributors">
      {users.map((user, index) => (
        <Tooltip leaveDelay={0} text={<b>{user.name}</b>} key={`${user.url}-${index}`}>
          <Link color target="_blank" rel="nofollow" href={user.url}>
            <Avatar src={user.avatar} />
          </Link>
        </Tooltip>
      ))}
      <Tooltip
        leaveDelay={0}
        text={isChinese ? '在 GitHub 上编辑此页面' : 'Edit this page on GitHub'}
        type="dark">
        <Link color target="_blank" rel="nofollow" href={link}>
          <Avatar text="Add" />
        </Link>
      </Tooltip>
      <style jsx>{`
        .contributors {
          padding-left: 5px;
          padding-top: 5px;
          max-width: 100%;
          height: auto;
          display: flex;
          flex-wrap: wrap;
        }

        .contributors :global(.tooltip) {
          margin-right: 5px;
        }
      `}</style>
    </div>
  )
}

HomeCell: React.FC<HomeCellProps> = ({ url, title, desc, icon }) => {
  const theme = useTheme()
  return (
    <NextLink href={url} passHref>
      <Link>
        <Card padding="5px" shadow width="100%">
          <h4 className="feature__title">
            <div className="feature__icon">{icon}</div>
            {title}
          </h4>
          <p className="feature__description">{desc}</p>
        </Card>
        <style jsx>{`
          .feature__title {
            display: flex;
            flex-direction: row;
            align-items: center;
          }
          .feature__icon {
            height: 2.5rem;
            width: 2.5rem;
            padding: 0.625rem;
            margin-right: ${theme.layout.gapHalf};
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(#3291ff, #0761d1);
            color: #fff;
            border-radius: 2rem;
          }
          .feature__icon :global(svg) {
            width: 100%;
            height: 100%;
          }
          .feature__description {
            color: ${theme.palette.accents_6};
          }
        `}</style>
      </Link>
    </NextLink>
  )
}

VirtualAnchor: React.FC<React.PropsWithChildren<Props>> = ({ children, pure }) => {
  const theme = useTheme()
  const ref = useRef<HTMLAnchorElement>(null)
  const [id, setId] = useState<string | undefined>()

  useEffect(() => {
    if (!ref.current) return
    setId(virtualAnchorEncode(ref.current.textContent || undefined))
  }, [ref.current])

  return (
    <span className="parent" ref={ref}>
      <Link href={`#${id}`}>{children}</Link>
      <span className="virtual" id={id} />
      {!pure && (
        <span className="icon">
          <AnchorIcon />
        </span>
      )}
      <style jsx>{`
        .parent {
          position: relative;
          color: inherit;
        }

        .parent :global(a) {
          color: inherit;
        }

        .virtual {
          position: absolute;
          top: -65px;
          left: 0;
          opacity: 0;
          pointer-events: none;
          visibility: hidden;
        }

        .icon {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          left: -1.5em;
          top: 50%;
          transform: translateY(-50%);
          position: absolute;
          opacity: 0;
          visibility: hidden;
          font-size: inherit;
          width: 0.8em;
          height: 0.8em;
          margin-top: 1px;
          color: ${theme.palette.accents_5};
        }

        .parent:hover > .icon {
          opacity: 1;
          visibility: visible;
        }
      `}</style>
    </span>
  )
}

Demo: React.FC<React.PropsWithChildren<unknown>> = () => {
  const theme = useTheme()
  const { isChinese } = useConfigs()

  return (
    <div className="demo">
      <div className="content">
        {isChinese ? (
          <>
            <Text h2 mb={0} font="13px" type="secondary">
              预览
            </Text>
            <Text>
              这里是你变更主题后的即时预览。此外，当你每次更新主题变量时，整个文档站点也会随之变化。
            </Text>
          </>
        ) : (
          <>
            <Text h2 mb={0} font="13px">
              PREVIEWS
            </Text>
            <Text>
              Here&#39;s a preview of your changes to the Theme. When you set the changes,
              the entire document site will change with the theme.
            </Text>
          </>
        )}

        <Spacer h={1.7} />
        <Text h3 font="13px" type="secondary">
          {isChinese ? '色彩' : 'COLORS'}
        </Text>
        <Colors />

        <Spacer h={1.7} />
        <Text h3 font="13px" type="secondary">
          {isChinese ? '排版' : 'Typography'}
        </Text>
        <Text>
          <Link rel="nofollow" href="https://en.wikipedia.org/wiki/HTTP/2" color>
            HTTP/2
          </Link>{' '}
          allows the server to <Code>push</Code> content, that is, to respond with data
          for more queries than the client requested. This allows the server to supply
          data it knows a web browser will need to render a web page, without waiting for
          the browser to examine the first response, and without the overhead of an
          additional request cycle.
        </Text>
        <Text h6>Heading</Text>
        <Text h5>Heading</Text>
        <Text h4>Heading</Text>
        <Text h3>Heading</Text>

        <Spacer h={1.7} />
        <Text h3 font="13px" type="secondary">
          {isChinese ? '基础组件' : 'Basic Components'}
        </Text>
        <Select width="90%" placeholder="Choose one" initialValue="1">
          <Select.Option value="1">Option 1</Select.Option>
          <Select.Option value="2">Option 2</Select.Option>
        </Select>
        <Spacer h={1} />
        <Grid.Container width="100%">
          <Grid xs={8}>
            <Button disabled auto>
              Action
            </Button>
          </Grid>
          <Grid xs={8}>
            <Button auto>Action</Button>
          </Grid>
          <Grid xs={8}>
            <Button auto type="secondary">
              Action
            </Button>
          </Grid>
        </Grid.Container>
      </div>
      <style jsx>{`
        .demo {
          width: 34%;
          margin-top: calc(${theme.layout.gap} * 2);
          margin-right: ${theme.layout.gap};
          padding-right: ${theme.layout.gapQuarter};
          position: relative;
          border-right: 1px solid ${theme.palette.border};
          height: auto;
          transition: width 200ms ease;
        }

        .content {
          width: 100%;
        }

        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
          .demo {
            display: none;
          }
        }
      `}</style>
    </div>
  )
}