feat(ui): add reading time on post link

mateusfg7 · May 30, 2023 · ee2ed71 · ee2ed71
1 parent 5948ea4
commit ee2ed71
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 9 deletions.
diff --git a/src/shared/components/post-list/icons.tsx b/src/shared/components/post-list/icons.tsx
@@ -0,0 +1,15 @@
+'use client'
+
+import {
+  CalendarBlank as CalendarBlankIcon,
+  Clock as ClockIcon,
+  IconProps
+} from '@phosphor-icons/react'
+import React from 'react'
+
+export const CalendarBlank: React.FC<IconProps> = ({ ...props }) => (
+  <CalendarBlankIcon {...props} />
+)
+export const Clock: React.FC<IconProps> = ({ ...props }) => (
+  <ClockIcon {...props} />
+)
diff --git a/src/shared/components/post-list/post-link.tsx b/src/shared/components/post-list/post-link.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link'
 import { Date } from '@/shared/components/date'
 import { Post } from 'contentlayer/generated'
 import { DraftBadge, PlannedBadge, TestBadge } from './post-badges'
+import { CalendarBlank, Clock } from './icons'
 
 interface Props {
   post: Post
@@ -12,6 +13,7 @@ interface Props {
 
 export function PostLink({ post, hideYear = false }: Props) {
   const showDate = !post.test && post.status !== 'planned'
+  const showReadingTime = !post.test && post.status !== 'planned'
 
   if (post.status === 'planned') {
     return (
@@ -43,22 +45,34 @@ export function PostLink({ post, hideYear = false }: Props) {
   } else {
     return (
       <Link href={`/post/${post.id}`} className="group">
-        <section className="space-y-2">
+        <section className="space-y-1">
           <div className="flex items-center justify-start gap-2">
             <h2 className="text-xl font-bold text-neutral-700 group-hover:text-blue-700 dark:text-neutral-500 dark:group-hover:text-blue-500">
               {post.title}
             </h2>
+
             {post.test && <TestBadge />}
             {post.status === 'draft' && !post.test && <DraftBadge />}
           </div>
-          <span className="text-neutral-500 group-hover:text-neutral-700 dark:group-hover:text-neutral-400">
-            {showDate && (
-              <span>
-                <Date
-                  dateString={post.date}
-                  dateFormat={hideYear ? 'LLL d' : 'LLL d, yyyy'}
-                />{' '}
-                &#8226;{' '}
+          <span className="inline-flex items-center gap-3 text-neutral-500 group-hover:text-neutral-700 dark:group-hover:text-neutral-400">
+            {(showDate || showReadingTime) && (
+              <span className="inline-flex items-center gap-2 rounded-lg bg-neutral-200/40 p-1 leading-none">
+                {showDate && (
+                  <span className="inline-flex items-center gap-1">
+                    <CalendarBlank />
+                    <Date
+                      dateString={post.date}
+                      dateFormat={hideYear ? 'LLL d' : 'LLL d, yyyy'}
+                    />
+                  </span>
+                )}
+
+                {showReadingTime && (
+                  <span className="inline-flex items-center gap-1">
+                    <Clock />
+                    <span>{Math.ceil(post.reading_time.minutes)} min read</span>
+                  </span>
+                )}
               </span>
             )}