35 lines
1.1 KiB
Plaintext
35 lines
1.1 KiB
Plaintext
|
---
|
||
|
import Pagination from '@/components/page/pagination/Pagination.astro';
|
||
|
import PostSquare from '@/components/page/post/PostSquare.astro';
|
||
|
import { slicePosts } from '@/helpers/formatter';
|
||
|
import type { Category, Post } from '@/helpers/schema';
|
||
|
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||
|
import options from '@/options';
|
||
|
|
||
|
interface Props {
|
||
|
category: Category;
|
||
|
posts: Post[];
|
||
|
pageNum: number;
|
||
|
}
|
||
|
|
||
|
const { category, posts, pageNum } = Astro.props;
|
||
|
const { currentPosts, totalPage } = slicePosts(posts, pageNum, options.settings.pagination.category);
|
||
|
---
|
||
|
|
||
|
<BaseLayout title={category.name}>
|
||
|
<div class="px-lg-2 px-xxl-5 py-3 py-md-4 py-xxl-5">
|
||
|
<div class="container">
|
||
|
<div class="mb-3 mb-lg-4">
|
||
|
<h1>{category.name}</h1>
|
||
|
<div class="text-muted mt-1">{category.description}</div>
|
||
|
</div>
|
||
|
<div class="row g-2 g-md-3 g-xxl-4 list-grouped">
|
||
|
{currentPosts.map((post, index) => <PostSquare post={post} first={index === 0} />)}
|
||
|
</div>
|
||
|
<div class="mt-4 mt-lg-5">
|
||
|
<Pagination current={pageNum} total={totalPage} rootPath={category.permalink} />
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</BaseLayout>
|