z0x/blog.z0x.ca
Code Actions

fix: inverted PostNavigation logic

Browse source
This commit is contained in:
jason 2024-10-14 21:58:04 -07:00
parent dc05cb25a6
commit 98adfca816
4 changed files with 556 additions and 713 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/components/PostNavigation.astro
View file

@ -9,13 +9,13 @@ const { prevPost, nextPost } = Astro.props
<div class="col-start-2 flex flex-col gap-4 sm:flex-row">
<Link
href={prevPost ? `/blog/${prevPost.slug}` : '#'}
href={nextPost ? `/blog/${nextPost.slug}` : '#'}
class={cn(
buttonVariants({ variant: 'outline' }),
'rounded-xl group flex items-center justify-start w-full sm:w-1/2 h-fit',
!prevPost && 'pointer-events-none opacity-50 cursor-not-allowed',
!nextPost && 'pointer-events-none opacity-50 cursor-not-allowed',
)}
aria-disabled={!prevPost}
aria-disabled={!nextPost}
>
<div class="mr-2 flex-shrink-0">
<Icon
@ -24,25 +24,26 @@ const { prevPost, nextPost } = Astro.props
/>
</div>
<div class="flex flex-col items-start overflow-hidden">
<span class="text-left text-xs text-muted-foreground">Previous Post</span>
<span class="text-left text-xs text-muted-foreground">Latest Post</span>
<span class="w-full truncate text-left text-sm"
>{prevPost?.data.title || 'Latest post!'}</span
>{nextPost?.data.title || 'Last post!'}</span
>
</div>
</Link>
<Link
href={nextPost ? `/blog/${nextPost.slug}` : '#'}
href={prevPost ? `/blog/${prevPost.slug}` : '#'}
class={cn(
buttonVariants({ variant: 'outline' }),
'rounded-xl group flex items-center justify-end w-full sm:w-1/2 h-fit',
!nextPost && 'pointer-events-none opacity-50 cursor-not-allowed',
!prevPost && 'pointer-events-none opacity-50 cursor-not-allowed',
)}
aria-disabled={!nextPost}
aria-disabled={!prevPost}
>
<div class="flex flex-col items-end overflow-hidden">
<span class="text-right text-xs text-muted-foreground">Next Post</span>
<span class="text-right text-xs text-muted-foreground">Previous Post</span
>
<span class="w-full truncate text-right text-sm"
>{nextPost?.data.title || 'Last post!'}</span
>{prevPost?.data.title || 'Latest post!'}</span
>
</div>
<div class="ml-2 flex-shrink-0">