From 3ab2a9c64bf78f937fd5b73245b820ac61e667d0 Mon Sep 17 00:00:00 2001
From: DefectingCat <i@defect.ink>
Date: Mon, 20 Mar 2023 16:34:54 +0800
Subject: [PATCH] Add blog index page

---
 app/blog/layout.tsx | 19 +++++++++++++++++++
 app/blog/page.tsx   | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 app/blog/layout.tsx
 create mode 100644 app/blog/page.tsx

diff --git a/app/blog/layout.tsx b/app/blog/layout.tsx
new file mode 100644
index 0000000..dc71d29
--- /dev/null
+++ b/app/blog/layout.tsx
@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+
+export default function PageLayout({ children }: { children: ReactNode }) {
+  return (
+    <main className="max-w-4xl mx-auto">
+      <h1
+        className={clsx(
+          'text-5xl font-bold text-center font-Barlow',
+          'mt-8 mb-20 text-gray-800 dark:text-gray-200'
+        )}
+      >
+        Blog posts
+      </h1>
+
+      <div className="px-4 lg:px-0">{children}</div>
+    </main>
+  );
+}
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
new file mode 100644
index 0000000..559ac03
--- /dev/null
+++ b/app/blog/page.tsx
@@ -0,0 +1,33 @@
+import PostCard from 'components/post-card';
+import PostCardLoading from 'components/rua/loading/post-card-loading';
+import { PostPerPage, postLists } from 'lib/posts';
+import { Fragment, Suspense } from 'react';
+import Pagination from 'components/rua/rua-pagination';
+
+export default async function Page() {
+  const posts = (await postLists()).slice(0, PostPerPage);
+  const next = 2;
+  const total = Math.ceil(posts.length / PostPerPage);
+
+  return (
+    <>
+      {posts.map((post) => (
+        <Fragment key={post.slug}>
+          <Suspense fallback={<PostCardLoading />}>
+            <PostCard post={post} />
+          </Suspense>
+        </Fragment>
+      ))}
+
+      <Pagination
+        className="py-6 mt-4 px-7 lg:px-5"
+        hasPrev={false}
+        hasNext={next <= total}
+        prevLink={''}
+        nextLink={`/blog/${next}`}
+        current={1}
+        total={total}
+      />
+    </>
+  );
+}