From 42369a1cb4d0c7cb93dec807c3b56fa138f1ac7c Mon Sep 17 00:00:00 2001
From: kayjaydee <killian.dalcin@gmail.com>
Date: Wed, 22 Apr 2026 10:06:52 +0200
Subject: [PATCH] feat(06-04): add BlogPrevNext component (grid 2 cols,
 BlogCard compact variant)

---
 app/components/BlogPrevNext.vue | 39 +++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 app/components/BlogPrevNext.vue

diff --git a/app/components/BlogPrevNext.vue b/app/components/BlogPrevNext.vue
new file mode 100644
index 0000000..ca474b3
--- /dev/null
+++ b/app/components/BlogPrevNext.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+interface SurroundArticle {
+  path: string
+  title: string
+  description?: string
+  date: string
+  tags?: string[]
+  image?: string
+  minutes?: number
+}
+
+interface Props {
+  prev: SurroundArticle | null
+  next: SurroundArticle | null
+}
+
+defineProps<Props>()
+const { t } = useI18n()
+</script>
+
+<template>
+  <nav
+    v-if="prev || next"
+    class="mt-16 grid md:grid-cols-2 gap-5"
+    :aria-label="t('blog.prevArticle') + ' / ' + t('blog.nextArticle')"
+  >
+    <!-- Prev (older article in DESC order) -->
+    <div v-if="prev">
+      <BlogCard :article="prev" variant="compact" direction="prev" />
+    </div>
+    <div v-else aria-hidden="true" />
+
+    <!-- Next (newer article in DESC order) -->
+    <div v-if="next">
+      <BlogCard :article="next" variant="compact" direction="next" />
+    </div>
+    <div v-else aria-hidden="true" />
+  </nav>
+</template>