src/components/blog/PostNavigation.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
30
31
32
33
34
35
36
37
38
39

---
import type { CollectionEntry } from "astro:content";
import { t } from "@/i18n/translations";

interface Props {
	prevPost: CollectionEntry<"post"> | null | undefined;
	nextPost: CollectionEntry<"post"> | null | undefined;
	language?: string | undefined;
}

const { prevPost, nextPost, language } = Astro.props;
---

{
	(prevPost || nextPost) && (
		<nav aria-label="Post navigation" class="mt-8 flex items-center gap-x-4">
			{prevPost && (
				<a
					class="hover:text-accent me-auto py-2"
					data-astro-prefetch
					href={`/posts/${prevPost.id}/`}
				>
					<span class="sr-only">{t(language, "newerPostSr")}</span>
					{t(language, "newerPost")}
				</a>
			)}
			{nextPost && (
				<a
					class="hover:text-accent ms-auto py-2"
					data-astro-prefetch
					href={`/posts/${nextPost.id}/`}
				>
					<span class="sr-only">{t(language, "olderPostSr")}</span>
					{t(language, "olderPost")}
				</a>
			)}
		</nav>
	)
}