refactor: extract dynamic time-ago logic into a standalone component

### CHANGES
- Create PostTimeAgo component for dynamic relative time updates
- Replace static date formatting in header with new component
- Clean up unused imports and hooks in post components
- Remove redundant Chakra UI components from the slug page
- Implement interval to refresh relative post timestamps every minute

Author: raitucarp

src/app/~/[slug]/page.tsx

@@ -1,17 +1,10 @@
 import { Metadata } from "next";
 import { notFound } from "next/navigation";
-import { getAllPosts, getPostByFilepath, getPostBySlug } from "@/lib/api";
-import { markdownToHtml } from "@/lib/markdown";
-import {
-  Container,
-  HStack,
-  IconButton,
-  Portal,
-  VStack,
-} from "@chakra-ui/react";
+import { getAllPosts, getPostBySlug } from "@/lib/api";
+import { IconButton, Portal, VStack } from "@chakra-ui/react";
 import { PostBody } from "@/components/posts/body";
 import { PostHeader } from "@/components/posts/header";
-import { merriweather, merriweatherSans } from "@/lib/fonts";
+import { merriweather } from "@/lib/fonts";
 import Link from "next/link";
 import { FiArrowLeft } from "react-icons/fi";
 import { ReadingTimeProgressBar } from "@/components/reading-progress";

src/components/posts/body.tsx

@@ -1,9 +1,7 @@
-import { merriweather, merriweatherSans, notoSerif } from "@/lib/fonts";
-import { Box, Heading, Text } from "@chakra-ui/react";
+import { merriweather, notoSerif } from "@/lib/fonts";
+import { Heading, Text } from "@chakra-ui/react";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { useWindowScroll } from "react-use";
-import { useEffect } from "react";
 
 type Props = {
   content: string;

src/components/posts/header.tsx

@@ -1,7 +1,7 @@
-import { Author } from "@/interfaces/author";
 import { Post } from "@/interfaces/post";
-import { Badge, Heading, HeadingProps, HStack, Text } from "@chakra-ui/react";
-import { format, formatDistance } from "date-fns";
+import { Badge, Heading, HeadingProps, HStack } from "@chakra-ui/react";
+import { format } from "date-fns";
+import { PostTimeAgo } from "../timeago";
 
 type Props = Post & { _heading: HeadingProps };
 
@@ -21,11 +21,7 @@ export const PostHeader = ({
         <Badge size={"lg"}>{author}</Badge>
         <Badge size={"lg"}>{stats?.text}</Badge>
         <Badge size={"lg"}>{format(date, "dd MMMM yyy")}</Badge>
-        <Badge size={"lg"}>
-          {formatDistance(new Date(), new Date(date), {
-            addSuffix: true,
-          })}
-        </Badge>
+        <PostTimeAgo date={date} />
       </HStack>
     </>
   );

src/components/timeago.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Badge } from "@chakra-ui/react";
+import { format, formatDistance } from "date-fns";
+import { useEffect, useState } from "react";
+
+type PostTimeAgoProps = {
+  date: string | Date;
+};
+
+export const PostTimeAgo = ({ date }: PostTimeAgoProps) => {
+  const [timeAgo, setTimeAgo] = useState("");
+
+  useEffect(() => {
+    const updateTime = () => {
+      setTimeAgo(
+        formatDistance(new Date(), new Date(date), {
+          addSuffix: true,
+        })
+      );
+    };
+
+    updateTime();
+    const interval = setInterval(updateTime, 60000);
+
+    return () => clearInterval(interval);
+  }, [date]);
+
+  return <Badge size={"lg"}>{timeAgo}</Badge>;
+};