0
mirror of https://github.com/valentineus/popov.link.git synced 2025-07-04 08:30:27 +03:00

Add PostPagination component for blog post navigation

This commit is contained in:
2024-09-12 14:06:44 +00:00
parent 4ba339984d
commit 0b57b888ca
2 changed files with 61 additions and 3 deletions

View File

@ -0,0 +1,47 @@
---
const { prevPost, nextPost } = Astro.props;
---
<style lang="scss">
.pagination {
overflow: hidden;
padding: 5rem 0;
width: 100%;
}
@media (width <=684px) {
.pagination {
padding: 2rem 0;
}
}
.prev,
.next {
max-width: 40%;
}
.prev {
float: left;
}
.next {
float: right;
}
</style>
<div class="pagination">
{
prevPost && (
<span class="prev">
<a href={`/blog/${prevPost.slug}`}>&lt; {prevPost.data.title}</a>
</span>
)
}
{
nextPost && (
<span class="next">
<a href={`/blog/${nextPost.slug}`}>{nextPost.data.title} &gt;</a>
</span>
)
}
</div>