feat(06-04): add BlogPrevNext component (grid 2 cols, BlogCard compact variant)
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user