1---
 2import { siteConfig } from '@/config';
 3import type { BlogPost } from '@/types/data';
 4import Pagination from './widgets/Pagination.astro';
 5import PostCard from './widgets/PostCard.astro';
 6
 7interface Props {
 8  posts: BlogPost[];
 9  currentPage: number;
10  postsPerPage?: number;
11  baseUrl: string;
12  specialPage?: { page: number; url: string }[];
13}
14
15let { posts, currentPage, postsPerPage, baseUrl, specialPage } = Astro.props;
16
17postsPerPage = postsPerPage || siteConfig.postsPerPage;
18
19const totalPages = Math.ceil(posts.length / postsPerPage);
20posts = posts.slice((currentPage - 1) * postsPerPage, currentPage * postsPerPage);
21---
22
23<div id="post-page" class="swup-transition-slide flex flex-col gap-4">
24  {
25    posts.map((post) => {
26      const data = post.data;
27      return (
28        <PostCard
29          title={data.title}
30          url={'/posts/' + data.slug + '/'}
31          published={data.published}
32          tags={data.tags}
33          category={data.category}
34          cover={data.cover}
35          description={data.description}
36        />
37      );
38    })
39  }
40  <Pagination
41    total={totalPages}
42    current={currentPage}
43    baseUrl={baseUrl}
44    specialPages={specialPage}
45  />
46</div>