Files
MyBlog-Next/src/layouts/Posts.astro
T
Sat Naing 581826a5af feat: add pagination in tag posts (#201)
* feat: add pagination in tag posts

Implement pagination in tag posts. Refactor and extract pagination logic and pagination component.

Closes: #152

* fix: update breadcrumbs for updated tag pagination
2023-12-29 10:26:02 +06:30

41 lines
1.1 KiB
Plaintext

---
import type { CollectionEntry } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Main from "@layouts/Main.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import Pagination from "@components/Pagination.astro";
import Card from "@components/Card";
import { SITE } from "@config";
export interface Props {
currentPage: number;
totalPages: number;
paginatedPosts: CollectionEntry<"blog">[];
}
const { currentPage, totalPages, paginatedPosts } = Astro.props;
---
<Layout title={`Posts | ${SITE.title}`}>
<Header activeNav="posts" />
<Main pageTitle="Posts" pageDesc="All the articles I've posted.">
<ul>
{
paginatedPosts.map(({ data, slug }) => (
<Card href={`/posts/${slug}`} frontmatter={data} />
))
}
</ul>
</Main>
<Pagination
{currentPage}
{totalPages}
prevUrl={`/posts${currentPage - 1 !== 1 ? "/" + (currentPage - 1) : ""}`}
nextUrl={`/posts/${currentPage + 1}`}
/>
<Footer noMarginTop={totalPages > 1} />
</Layout>