Add post card in blog page

* add component and page tests

components/NavBar.tsx

@@ -27,7 +27,7 @@ const HeadBar: FC = () => {
       <header
         className={cn(
           'flex justify-between mx-auto',
-          'max-w-6xl p-6',
+          'max-w-6xl p-6 h-[84px]',
           'items-center relative'
         )}
       >

components/PostCard.tsx

@@ -0,0 +1,44 @@
+import Link from 'next/link';
+import { FC } from 'react';
+import { Post } from 'types';
+import cn from 'classnames';
+
+interface Props {
+  post: Post;
+}
+
+const PostCard: FC<Props> = ({ post }) => {
+  return (
+    <>
+      <Link href={`/p/${post.slug}`} passHref>
+        <a>
+          <article
+            className={cn(
+              'rounded-xl py-4 px-5 md:p-7',
+              'hover:bg-sky-100 hover:bg-opacity-50',
+              // 'hover:bg-rua-gray-100 hover:bg-opacity-10',
+              'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
+              'flex items-center justify-between'
+            )}
+          >
+            <div>
+              <h2 className="mb-4 text-3xl font-Barlow">{post.title}</h2>
+
+              <div className="flex items-center text-sm">
+                {post.tags.map((tag) => (
+                  <div key={tag} className="mr-4 last:mr-0">
+                    {tag}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div>{post.date}</div>
+          </article>
+        </a>
+      </Link>
+    </>
+  );
+};
+
+export default PostCard;