feat(ui): add reading time on post page

mateusfg7 · May 30, 2023 · e90fdf0 · e90fdf0
1 parent 6d6fd17
commit e90fdf0
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 20 deletions.
diff --git a/src/app/(blog)/post/[slug]/components/icons.tsx b/src/app/(blog)/post/[slug]/components/icons.tsx
@@ -0,0 +1,8 @@
+'use client'
+
+import { Folder as FolderIcon, IconProps } from '@phosphor-icons/react'
+import React from 'react'
+
+export const Folder: React.FC<IconProps> = ({ ...props }) => (
+  <FolderIcon {...props} />
+)
diff --git a/src/app/(blog)/post/[slug]/page.tsx b/src/app/(blog)/post/[slug]/page.tsx
@@ -2,14 +2,15 @@ import React from 'react'
 import type { Metadata } from 'next'
 import Link from 'next/link'
 import { useMDXComponent } from 'next-contentlayer/hooks'
-import { RiHistoryLine } from 'react-icons/ri'
 import { FiTag } from 'react-icons/fi'
 
 import { allPosts, type Post } from 'contentlayer/generated'
 
 import { slug } from '@/shared/lib/slug'
 import { Date } from '@/shared/components/date'
+import { CalendarBlank, Clock } from '@/shared/components/icons'
 import { TopButton } from './components/top-button'
+import { Folder } from './components/icons'
 
 interface Props {
   params: { slug: string }
@@ -53,32 +54,46 @@ export default function Page({ params }: Props) {
           </div>
         </div>
         <div>
-          <p>
-            <Date dateString={post.date} /> &#8226;{' '}
-            <Link
-              href={`/categories/${slug(post.category)}`}
-              className="hover:text-blue-500 dark:hover:text-blue-400"
-            >
-              {post.category}
-            </Link>
-          </p>
-          {post.lastUpdate && (
-            <p
-              className="flex items-center gap-1 text-neutral-500"
-              title="Last Update"
-            >
-              <Date dateString={post.lastUpdate} /> <RiHistoryLine />
-            </p>
-          )}
-          <p className="mt-1 flex flex-wrap gap-3">
+          <div>
+            <div className="flex items-center gap-1">
+              <span className="inline-flex items-center gap-1">
+                <CalendarBlank />
+                <Date dateString={post.date} />
+              </span>
+              {post.lastUpdate && (
+                <span
+                  className="inline-flex items-center gap-1 text-neutral-500"
+                  title="Last Update"
+                >
+                  {'->'} <Date dateString={post.lastUpdate} />
+                </span>
+              )}
+            </div>
+            <div className="flex items-center gap-1">
+              <span className="group inline-flex items-center gap-1">
+                <Folder />
+                <Link
+                  href={`/categories/${slug(post.category)}`}
+                  className="group-dark:hover:text-blue-400 group-hover:text-blue-500"
+                >
+                  {post.category}
+                </Link>
+              </span>
+              <span className="group inline-flex items-center gap-1">
+                <Clock />
+                <span>{Math.ceil(post.reading_time.minutes)} min read</span>
+              </span>
+            </div>
+          </div>
+          <div className="mt-1 flex flex-wrap gap-3">
             {tags.map((tag, index) => (
               <Link href={`/tag/${slug(tag)}`} key={index}>
                 <span className="hover:cursor-pointe flex items-center justify-center gap-1 text-neutral-500 transition-colors duration-200 hover:text-neutral-900 dark:hover:text-neutral-100">
                   {tag} <FiTag size={15} />
                 </span>
               </Link>
             ))}
-          </p>
+          </div>
         </div>
       </div>
       <div className="post-content">