Refactor, update UI, and add notes

components/recent-posts.tsx

@@ -1,9 +1,9 @@
 import Link from "next/link";
-import date from "../util/date";
-import { PostMeta } from "../util/slug";
+import date from "../lib/date";
+import { IPostMeta } from "../lib/slug";
 import style from '../styles/recent-posts.module.css';
 
-function RecentPosts({ postsMeta }: { postsMeta: PostMeta[] }) {
+function RecentPosts({ postsMeta }: { postsMeta: IPostMeta[] }) {
     if (!postsMeta.length)
         return <></>;
     return (
@@ -13,12 +13,14 @@ function RecentPosts({ postsMeta }: { postsMeta: PostMeta[] }) {
                 {postsMeta?.slice(0, 10)
                     .map((post: any) => {
                         return <div className={style.block} key={post.slug}>
-                            <Link href={`/posts/${post.slug}`}>
-                                <a className={`${style.postTitle} h5`}>{post.title}</a>
-                            </Link>
                             <span className={style.postDate}>
-                                {date.prettyPrint(new Date(post.created_at))}
+                                {date.toRelativeDate(new Date(post.created_at))}
                             </span>
+                            <div className={style.postTitle}>
+                                <Link href={`/posts/${post.slug}`}>
+                                    {post.title}
+                                </Link>
+                            </div>
                         </div>
                     })}
             </div>