react-feather#Link TypeScript Examples

The following examples show how to use react-feather#Link. 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: DownloadActionBar.tsx    From bee-dashboard with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up 
export function DownloadActionBar({
  onOpen,
  onCancel,
  onDownload,
  onUpdateFeed,
  hasIndexDocument,
  loading,
}: Props): ReactElement {
  return (
    <Grid container justifyContent="space-between">
      <ExpandableListItemActions>
        {hasIndexDocument && (
          <SwarmButton onClick={onOpen} iconType={Link} disabled={loading}>
            View Website
          </SwarmButton>
        )}
        <SwarmButton onClick={onDownload} iconType={Download} disabled={loading} loading={loading}>
          Download
        </SwarmButton>
        <SwarmButton onClick={onCancel} iconType={X} disabled={loading} cancel>
          Close
        </SwarmButton>
      </ExpandableListItemActions>
      <Box mb={1} mr={1}>
        <SwarmButton onClick={onUpdateFeed} iconType={Bookmark} disabled={loading}>
          Update Feed
        </SwarmButton>
      </Box>
    </Grid>
  )
}
Example #2
Source File: [slug].tsx    From samuelkraft-next with MIT License 4 votes vote down vote up 
Book = ({ book, page }: BookProps): JSX.Element => {
  const router = useRouter()
  const { slug } = router.query

  if (router.isFallback) {
    return (
      <Page>
        <>Loading…</>
      </Page>
    )
  }

  if (!book) {
    return (
      <Page>
        <>404 No such book</>
      </Page>
    )
  }

  const { Name: title, Author: author, Rating: rating, Fiction: fiction, Date: date, Link: link, Genres: genres, Image: image } = book
  const seoTitle = `${title} Book Review - Samuel Kraft`
  const seoDesc = `${title} by ${author} book review, notes and thoughts`

  return (
    <Page>
      <NextSeo
        title={seoTitle}
        description={seoDesc}
        openGraph={{
          title: seoTitle,
          url: `https://samuelkraft.com/books/${slug}`,
          description: seoDesc,
          images: [
            {
              url: image[0].url,
              alt: `${title} book cover`,
            },
          ],
          site_name: 'Samuel Kraft',
        }}
        twitter={{
          cardType: 'summary_large_image',
        }}
      />
      <header className={styles.header}>
        <Image src={image[0].url} width={218} height={328} className={styles.cover} alt={title} />
        <div className={styles.meta}>
          <strong className={styles.title}>{title}</strong>
          <p className={styles.author}>{author}</p>

          <dl className={styles.metaList}>
            <dt>Non Fiction?</dt>
            <dd>
              <label htmlFor="non-fiction" className="sr-only">
                Non-fiction
              </label>
              <input type="checkbox" checked={!fiction} className={styles.checkbox} readOnly id="non-fiction" />
            </dd>
            <dt>Genres</dt>
            <dd>
              {genres.map(genre => (
                <span className={styles.genre} key={genre}>
                  {genre}
                </span>
              ))}
            </dd>
            <dt>Rating</dt>
            <dd>
              <Rating rating={rating} />
            </dd>
            <dt>Date finished</dt>
            <dd>{formatDate(date)}</dd>
          </dl>
          {link && (
            <Button href={link} variant="transparent">
              <>
                Buy the book <Link />
              </>
            </Button>
          )}
        </div>
      </header>
      <div className={styles.post}>{page && <NotionRenderer blockMap={page} />}</div>
    </Page>
  )
}