Add blog list page

app/blog/[page]/page.tsx

@@ -0,0 +1,39 @@
+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';
+import { notFound } from 'next/navigation';
+
+export default async function Page({ params }: { params: { page: string } }) {
+  const page = Number(params.page);
+  if (!page) notFound();
+
+  const allPosts = await postLists();
+  const posts = allPosts.slice((page - 1) * PostPerPage, PostPerPage * page);
+  const prev = page - 1;
+  const next = page + 1;
+  const total = Math.ceil(allPosts.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={!!prev}
+        hasNext={next <= total}
+        prevLink={prev === 1 ? '/blog' : `/blog/${prev}`}
+        nextLink={`/blog/${next}`}
+        current={next - 1}
+        total={total}
+      />
+    </>
+  );
+}

app/blog/page.tsx

@@ -5,9 +5,10 @@ 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 allPosts = await postLists();
+  const posts = allPosts.slice(0, PostPerPage);
   const next = 2;
-  const total = Math.ceil(posts.length / PostPerPage);
+  const total = Math.ceil(allPosts.length / PostPerPage);
 
   return (
     <>

app/fonts.ts

@@ -22,7 +22,6 @@ export const aref_ruqaa = Aref_Ruqaa({
 
 export const barlow = Barlow({
   weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
-  style: 'italic',
   variable: '--font-barlow',
   display: 'swap',
   subsets: ['latin'],