add relative time to posts

Signed-off-by: Shreyans Jain <[email protected]>
CodeWithShreyans · Dec 8, 2023 · ca942b7 · ca942b7
1 parent 1ffc0a0
commit ca942b7
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 48 deletions.
diff --git a/src/app/(pages)/blog/page.tsx b/src/app/(pages)/blog/page.tsx
@@ -3,6 +3,7 @@ import Link from "next/link"
 import { allPosts } from "contentlayer/generated"
 
 import { Button } from "@/components/shadcn/button"
+import { getTimeElapsed } from "@/lib/utils"
 
 export const metadata = {
     title: "Shreyans' Blog",
@@ -12,36 +13,53 @@ const Page = () => {
     return (
         <main className="flex w-full flex-col items-center">
             <ul className="flex w-full flex-col gap-2 px-4">
-                {allPosts.map((post) => (
-                    <li key={post._id}>
-                        <Button
-                            asChild
-                            className="flex h-auto w-auto cursor-pointer flex-col text-left"
-                            variant="ghost"
-                        >
-                            <Link href={post.url}>
-                                <p className="w-full text-base text-muted-foreground">
-                                    {new Date(post.date).toLocaleDateString(
-                                        "en-US",
-                                        {
+                {allPosts.map((post) => {
+                    const date = new Date(post.date)
+                    const time = getTimeElapsed(date.getTime())
+                    console.log(time)
+                    return (
+                        <li key={post._id}>
+                            <Button
+                                asChild
+                                className="flex h-auto w-auto cursor-pointer flex-col text-left"
+                                variant="ghost"
+                            >
+                                <Link href={post.url}>
+                                    <p className="w-full text-base text-muted-foreground">
+                                        {date.toLocaleDateString("en-US", {
                                             day: "numeric",
                                             month: "short",
                                             year: "numeric",
-                                        },
-                                    )}
-                                </p>
+                                        })}{" "}
+                                        (
+                                        {time.years
+                                            ? `${time.years} years`
+                                            : time.months
+                                              ? `${time.months} months`
+                                              : time.days
+                                                ? `${time.days} days`
+                                                : time.hours
+                                                  ? `${time.hours} hours`
+                                                  : time.minutes
+                                                    ? `${time.minutes} mins`
+                                                    : time.seconds
+                                                      ? `${time.seconds} secs`
+                                                      : null}{" "}
+                                        ago)
+                                    </p>
 
-                                <h2 className="w-full text-xl text-foreground">
-                                    {post.title}
-                                </h2>
+                                    <h2 className="w-full text-xl text-foreground">
+                                        {post.title}
+                                    </h2>
 
-                                <p className="w-full text-sm text-muted-foreground">
-                                    {post.brief}
-                                </p>
-                            </Link>
-                        </Button>
-                    </li>
-                ))}
+                                    <p className="w-full text-sm text-muted-foreground">
+                                        {post.brief}
+                                    </p>
+                                </Link>
+                            </Button>
+                        </li>
+                    )
+                })}
             </ul>
         </main>
     )

diff --git a/src/components/birth-time.tsx b/src/components/birth-time.tsx
@@ -1,21 +1,4 @@
-const getTimeElapsed = (startDate: number) => {
-    const timeDifference = Date.now() - startDate
-
-    // Define milliseconds in a unit of time
-    const millisecondsInSecond = 1000
-    const millisecondsInMinute = millisecondsInSecond * 60
-    const millisecondsInHour = millisecondsInMinute * 60
-    const millisecondsInDay = millisecondsInHour * 24
-    const millisecondsInMonth = millisecondsInDay * (365.25 / 12) // Approximate days in a month
-
-    // Calculate years, months, days, hours, minutes, and seconds
-    const years = Math.floor(timeDifference / millisecondsInMonth / 12)
-    const months = Math.floor((timeDifference / millisecondsInMonth) % 12)
-    const days = Math.floor((timeDifference / millisecondsInDay) % 30.44) // Approximate days in a month
-    const hours = Math.floor((timeDifference / millisecondsInHour) % 24)
-
-    return { days, hours, months, years }
-}
+import { getTimeElapsed } from "@/lib/utils"
 
 const BirthTime = () => {
     const time = getTimeElapsed(1179628980000)

diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
@@ -2,14 +2,14 @@ import type { ClassNameValue } from "tailwind-merge"
 
 import { twMerge } from "tailwind-merge"
 
-const cn = (...inputs: ClassNameValue[]) => {
+export const cn = (...inputs: ClassNameValue[]) => {
     return twMerge(inputs)
 }
 
-const random = (min: number, max: number) =>
+export const random = (min: number, max: number) =>
     Math.floor(Math.random() * (max - min)) + min
 
-const debounce = <S>(callback: (...args: S[]) => void, wait: number) => {
+export const debounce = <S>(callback: (...args: S[]) => void, wait: number) => {
     let timeoutId: number | undefined = undefined
     return (...args: S[]) => {
         window.clearTimeout(timeoutId)
@@ -19,7 +19,7 @@ const debounce = <S>(callback: (...args: S[]) => void, wait: number) => {
     }
 }
 
-const range = (start: number, end: number, step = 1) => {
+export const range = (start: number, end: number, step = 1) => {
     const output = []
     if (typeof end === "undefined") {
         end = start
@@ -31,4 +31,23 @@ const range = (start: number, end: number, step = 1) => {
     return output
 }
 
-export { cn, debounce, random, range }
+export const getTimeElapsed = (startDateMs: number) => {
+    const timeDifference = Date.now() - startDateMs
+
+    // Define milliseconds in a unit of time
+    const millisecondsInSecond = 1000
+    const millisecondsInMinute = millisecondsInSecond * 60
+    const millisecondsInHour = millisecondsInMinute * 60
+    const millisecondsInDay = millisecondsInHour * 24
+    const millisecondsInMonth = millisecondsInDay * (365.25 / 12) // Approximate days in a month
+
+    // Calculate years, months, days, hours, minutes, and seconds
+    const years = Math.floor(timeDifference / millisecondsInMonth / 12)
+    const months = Math.floor((timeDifference / millisecondsInMonth) % 12)
+    const days = Math.floor((timeDifference / millisecondsInDay) % 30.44) // Approximate days in a month
+    const hours = Math.floor((timeDifference / millisecondsInHour) % 24)
+    const minutes = Math.floor((timeDifference / millisecondsInMinute) % 60)
+    const seconds = Math.floor((timeDifference / millisecondsInSecond) % 60)
+
+    return { days, hours, minutes, months, seconds, years }
+}