feat: add Pagination component

src/components/Pagination.astro

@@ -0,0 +1,78 @@
+---
+import { Sprite } from 'astro-icon';
+
+export interface Props {
+	previousUrl?: string;
+	nextUrl?: string;
+	previousText?: string;
+	nextText?: string;
+}
+
+const { nextText, nextUrl, previousText, previousUrl } = Astro.props;
+---
+
+{
+	previousUrl && (
+		<a
+			aria-label={previousText || 'Previous'}
+			class="group fixed rounded-[50%] block-start-[calc(50%_-_20px)] inline-start-[1rem]"
+			href={previousUrl}
+			rel="prev"
+			title={previousText || 'Previous'}
+		>
+			<div class="pagination flex h-[40px] w-[40px] cursor-pointer items-center justify-center rounded-[50%] bg-black/5 outline-none transition-opacity duration-500 ease-in-out group-hover:bg-black/20 group-focus:bg-black/20 dark:bg-white/5 dark:group-hover:bg-white/20 dark:group-focus:bg-white/20">
+				<Sprite name="ri:arrow-left-s-line" aria-hidden="true" class="h-icon w-icon" />
+			</div>
+		</a>
+	)
+}
+{
+	nextUrl && (
+		<a
+			aria-label={nextText || 'Next'}
+			class="group fixed rounded-[50%] block-start-[calc(50%_-_20px)] inline-end-[1rem]"
+			href={nextUrl}
+			rel="next"
+			title={nextText || 'Next'}
+		>
+			<div class="pagination flex h-[40px] w-[40px] cursor-pointer items-center justify-center rounded-[50%] bg-black/5 outline-none transition-opacity duration-500 ease-in-out group-hover:bg-black/20 group-focus:bg-black/20 dark:bg-white/5 dark:group-hover:bg-white/20 dark:group-focus:bg-white/20">
+				<Sprite name="ri:arrow-right-s-line" aria-hidden="true" class="h-icon w-icon" />
+			</div>
+		</a>
+	)
+}
+
+<script is:inline>
+	const body = document.body;
+	const scrollUp = 'scroll-up';
+	const scrollDown = 'scroll-down';
+	let lastScroll = 0;
+
+	window.addEventListener('scroll', () => {
+		const currentScroll = window.pageYOffset;
+
+		if (currentScroll <= 0) {
+			body.classList.remove(scrollUp);
+			return;
+		}
+
+		if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
+			body.classList.remove(scrollUp);
+			body.classList.add(scrollDown);
+		} else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
+			body.classList.remove(scrollDown);
+			body.classList.add(scrollUp);
+		}
+		lastScroll = currentScroll;
+	});
+</script>
+
+<style is:global>
+	.scroll-up .pagination {
+		@apply opacity-100;
+	}
+
+	.scroll-down .pagination {
+		@apply opacity-0;
+	}
+</style>

src/components/index.ts

@@ -2,6 +2,7 @@
 import DownloadLink from './DownloadLink.astro';
 import EmailLink from './EmailLink.astro';
 import MoreLink from './MoreLink.astro';
+import Pagination from './Pagination.astro';
 
 export * from './AffiliateLink';
 export * from './AmazonBook';
@@ -27,4 +28,4 @@ export * from './Title';
 export * from './UnorderedList';
 export * from './Verse';
 export * from './YouTubeVideo';
-export { DownloadLink, EmailLink, MoreLink };
+export { DownloadLink, EmailLink, MoreLink, Pagination };