mirror of
				https://github.com/valentineus/popov.link.git
				synced 2025-11-04 14:59:45 +03:00 
			
		
		
		
	Add PostPagination component for blog post navigation
This commit is contained in:
		
							
								
								
									
										47
									
								
								src/components/PostPagination.astro
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										47
									
								
								src/components/PostPagination.astro
									
									
									
									
									
										Normal 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}`}>< {prevPost.data.title}</a>
 | 
			
		||||
			</span>
 | 
			
		||||
		)
 | 
			
		||||
	}
 | 
			
		||||
	{
 | 
			
		||||
		nextPost && (
 | 
			
		||||
			<span class="next">
 | 
			
		||||
				<a href={`/blog/${nextPost.slug}`}>{nextPost.data.title} ></a>
 | 
			
		||||
			</span>
 | 
			
		||||
		)
 | 
			
		||||
	}
 | 
			
		||||
</div>
 | 
			
		||||
		Reference in New Issue
	
	Block a user