mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-15 16:51:37 +00:00
Add blog index page
This commit is contained in:
19
app/blog/layout.tsx
Normal file
19
app/blog/layout.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
33
app/blog/page.tsx
Normal file
33
app/blog/page.tsx
Normal file
@ -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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
Reference in New Issue
Block a user