src/components/Paginator.astro


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

---
import type { PaginationLink } from "@/types";

interface Props {
	nextUrl?: PaginationLink;
	prevUrl?: PaginationLink;
}

const { nextUrl, prevUrl } = Astro.props;
---

{
	(prevUrl || nextUrl) && (
		<nav class="mt-8 flex items-center gap-x-4">
			{prevUrl && (
				<a class="hover:text-accent me-auto py-2" data-astro-prefetch href={prevUrl.url}>
					{prevUrl.srLabel && <span class="sr-only">{prevUrl.srLabel}</span>}
					{prevUrl.text ? prevUrl.text : "Previous"}
				</a>
			)}
			{nextUrl && (
				<a class="hover:text-accent ms-auto py-2" data-astro-prefetch href={nextUrl.url}>
					{nextUrl.srLabel && <span class="sr-only">{nextUrl.srLabel}</span>}
					{nextUrl.text ? nextUrl.text : "Next"}
				</a>
			)}
		</nav>
	)
}