39 lines
1.2 KiB
Text
39 lines
1.2 KiB
Text
---
|
|
import Link from '@components/Link.astro'
|
|
import { ArrowLeft, ArrowRight } from 'lucide-react'
|
|
import { buttonVariants } from '@/components/ui/button'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const { prevPost, nextPost } = Astro.props
|
|
---
|
|
|
|
<div class="mt-8 flex justify-between gap-4">
|
|
<Link
|
|
href={prevPost ? `/blog/${prevPost.slug}` : '#'}
|
|
class={cn(
|
|
buttonVariants({ variant: 'outline' }),
|
|
'group flex items-center justify-start gap-2 w-1/2',
|
|
!prevPost && 'pointer-events-none opacity-50 cursor-not-allowed',
|
|
)}
|
|
aria-disabled={!prevPost}
|
|
>
|
|
<ArrowLeft
|
|
className="h-4 w-4 transition-transform group-hover:-translate-x-1"
|
|
/>
|
|
<span class="truncate">{prevPost?.data.title || 'Latest post!'}</span>
|
|
</Link>
|
|
<Link
|
|
href={nextPost ? `/blog/${nextPost.slug}` : '#'}
|
|
class={cn(
|
|
buttonVariants({ variant: 'outline' }),
|
|
'group flex items-center justify-end gap-2 w-1/2',
|
|
!nextPost && 'pointer-events-none opacity-50 cursor-not-allowed',
|
|
)}
|
|
aria-disabled={!nextPost}
|
|
>
|
|
<span class="truncate">{nextPost?.data.title || 'Last post!'}</span>
|
|
<ArrowRight
|
|
className="h-4 w-4 transition-transform group-hover:translate-x-1"
|
|
/>
|
|
</Link>
|
|
</div>
|