react-feather#Clock JavaScript Examples

The following examples show how to use react-feather#Clock. 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: [[...slug]].jsx From vertx-web-site.github.io with Apache License 2.0
4 votes
BlogPage = ({ post, prevPost, nextPost, relatedPosts, category, categories,
    page, posts, numPages }) => {
  const [mdxModule, setMdxModule] = useState()

  useEffect(() => {
    (async () => {
      if (post?.content !== undefined) {
        setMdxModule(await run(post.content, runtime))
      }
    })()
  }, [post?.content])

  if (post === undefined) {
    let entries = posts.map(p => <BlogEntry key={p.slug} post={p} />)

    let title = "Blog"
    if (category !== undefined) {
      title = `${capitalize(category)} | ${title}`
    }
    if (page > 1) {
      title = `Page ${page} | ${title}`
    }

    return (
      <Blog title={title} categories={categories}>
        <div className="blog-entries">
          {entries}
        </div>
        <Pagination currentPage={page} numPages={numPages} category={category} />
      </Blog>
    )
  }

  let url = `${process.env.baseUrl}/blog/${post.slug}`

  return (
    <BlogPost title={`${post.meta.title} | Blog`} categories={categories}>
      <div className="blog-post-main">
        <div className="blog-post-content">
          <h1>{post.meta.title}</h1>
          {mdxModule?.default && <mdxModule.default components={COMPONENTS} /> || <></>}
        </div>

        <div className="blog-post-sidebar">
          {post.meta.authors.map(author => (
            <div className="blog-post-author" key={author.github_id}>
              <img className="blog-post-author-avatar"
                src={`https://github.com/${author.github_id}.png?size=160`}
                alt={`${author.name}'s profile image`} />
              <div className="blog-post-author-name">
                {post.meta.authors.length === 1 && "by "}<a href={`https://github.com/${author.github_id}`}
                  target="_blank" rel="noopener noreferrer">{author.name}</a>
              </div>
            </div>
          ))}
          {post.meta.pinned && <div className="blog-post-sidebar-pinned"><Label dark><strong>Pinned post</strong></Label></div>}
          {post.meta.pinned || <><div className="blog-post-sidebar-date">Posted on <BlogDate date={post.date} /></div>
          in <Link href="/blog/[[...slug]]" as={`/blog/category/${post.meta.category}/`}>
            <a className="blog-post-sidebar-category">{post.meta.category}</a>
          </Link></>}
          <div className="blog-post-sidebar-reading-time"><Clock className="feather" /> {post.readingTime.text}</div>
          <div className="blog-post-sidebar-share-icons">
            <a href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(post.meta.title)}&url=${encodeURIComponent(url)}&via=vertx_project`}
                target="_blank" rel="noopener noreferrer">
              <SimpleIcon icon={siTwitter} />
            </a>
            <a href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`}
                target="_blank" rel="noopener noreferrer">
              <SimpleIcon icon={siLinkedin} />
            </a>
            <a href={`https://www.facebook.com/sharer.php?u=${encodeURIComponent(url)}`}
                target="_blank" rel="noopener noreferrer">
              <SimpleIcon icon={siFacebook} />
            </a>
          </div>
        </div>
      </div>

      <div className="blog-post-next-prev">
        <div className="blog-post-next-prev-entry">
          {prevPost && (<>
            <h5>Next post</h5>
            <BlogEntry post={prevPost} />
          </>)}
        </div>

        <div className="blog-post-next-prev-entry">
          {nextPost && (<>
            <h5>Previous post</h5>
            <BlogEntry post={nextPost} />
          </>)}
        </div>
      </div>

      <div className="blog-post-related">
        <h5>Related posts</h5>
        <div className="blog-post-related-posts">
          {relatedPosts.map(rp => <BlogEntry key={rp.slug} post={rp} />)}
        </div>
      </div>
    </BlogPost>
  )
}