Format components

app/blog/page.tsx

@@ -1,5 +1,5 @@
-import PostCard from 'components/post-card';
-import PostCardLoading from 'components/rua/loading/post-card-loading';
+import PostCard from './post-card';
+import PostCardLoading from './post-card-loading';
 import { PostPerPage, postLists } from 'lib/posts';
 import { Fragment, Suspense } from 'react';
 import Pagination from 'components/rua/rua-pagination';

app/blog/post-card-loading.tsx

@@ -0,0 +1,29 @@
+import React, { memo } from 'react';
+import clsx from 'clsx';
+
+const PostCardLoading = () => {
+  return (
+    <article
+      className={clsx(
+        'rounded-xl py-4 px-5 md:p-7 animate-pulse',
+        'bg-sky-100 bg-opacity-50',
+        'dark:bg-rua-gray-800 dark:bg-opacity-100',
+        'flex items-center justify-between text-gray-800 ',
+        'mb-4 dark:text-gray-200'
+      )}
+    >
+      <div className="flex-1">
+        <h2 className="w-full mb-4 bg-gray-300 rounded-lg md:w-96 h-9 dark:bg-gray-500"></h2>
+
+        <div className="flex items-center text-sm">
+          <div className="w-16 h-5 mr-4 bg-gray-300 rounded-md last:mr-0 dark:bg-gray-500"></div>
+          <div className="w-16 h-5 bg-gray-300 rounded-md dark:bg-gray-500"></div>
+        </div>
+      </div>
+
+      <div className="hidden w-24 h-6 bg-gray-300 rounded-md md:block dark:bg-gray-500"></div>
+    </article>
+  );
+};
+
+export default memo(PostCardLoading);

app/blog/post-card.tsx

@@ -0,0 +1,54 @@
+import Link from 'next/link';
+import { Post } from 'types';
+import clsx from 'clsx';
+import { memo } from 'react';
+
+interface Props {
+  post: Post;
+}
+
+const PostCard = ({ post }: Props) => {
+  return (
+    <>
+      <Link href={`/p/${post.slug}`} passHref>
+        <article
+          className={clsx(
+            '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 justify-between text-gray-800 ',
+            'mb-4 dark:text-gray-200',
+            'flex-col'
+          )}
+        >
+          <div className="flex justify-between">
+            <h2 className="mb-4 text-3xl font-semibold font-Barlow">
+              {post.title}
+            </h2>
+
+            <div className="hidden lg:block">{post.date}</div>
+          </div>
+
+          <div className="flex justify-between">
+            <div className="flex items-center text-sm">
+              {Array.isArray(post.tags) ? (
+                post.tags.map((tag) => (
+                  <div key={tag} className="mr-4 last:mr-0">
+                    {tag}
+                  </div>
+                ))
+              ) : (
+                <div className="mr-4 last:mr-0">{post.tags}</div>
+              )}
+            </div>
+
+            <div className="lg:hidden">{post.date}</div>
+          </div>
+        </article>
+      </Link>
+    </>
+  );
+};
+
+export default memo(PostCard);