Update comment datetime

components/ui/Comments.tsx

@@ -4,10 +4,10 @@ import React, {ReactNode, useActionState} from 'react'
 import {useSession} from 'next-auth/react'
 import Image from 'next/image'
 import clsx from 'clsx'
-import {formatDate} from '@/lib/formatDate'
 import {addComment, loginWithGitHub} from '@/app/actions/comments'
 import {Button} from '@/components/ui/Button'
 import {GitHubIcon} from '@/components/icons/SocialIcons'
+import {formatDistanceToNow} from 'date-fns'
 
 type Comment = {
     id: number
@@ -25,8 +25,6 @@ type CommentsListProps = {
 }
 
 Comments.List = function List({comments}: CommentsListProps) {
-    if (!(comments?.length > 0)) return null
-
     return (
         <section>
             <h3 className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100 mb-4">
@@ -41,7 +39,7 @@ Comments.List = function List({comments}: CommentsListProps) {
                             <p className="font-semibold text-sm text-zinc-800 dark:text-zinc-100">{comment.user.name}</p>
                             <p className="text-sm text-zinc-500 dark:text-zinc-400">
                                 <time dateTime={comment.created_at}>
-                                    <span>&middot; {formatDate(comment.created_at)}</span>
+                                    <span>&middot; {`${formatDistanceToNow(comment.created_at)} ago`}</span>
                                 </time>
                             </p>
                         </div>

package-lock.json

@@ -24,6 +24,7 @@
         "@types/react-dom": "^19.0.4",
         "autoprefixer": "^10.4.13",
         "clsx": "^1.2.1",
+        "date-fns": "^4.1.0",
         "encoding": "^0.1.13",
         "eslint": "^9.21.0",
         "eslint-config-next": "^15.1.7",
@@ -3282,6 +3283,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.13",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",

package.json

@@ -26,6 +26,7 @@
     "@types/react-dom": "^19.0.4",
     "autoprefixer": "^10.4.13",
     "clsx": "^1.2.1",
+    "date-fns": "^4.1.0",
     "encoding": "^0.1.13",
     "eslint": "^9.21.0",
     "eslint-config-next": "^15.1.7",