all repos — website @ 3c25c02d670e1e95608312c59aa90fde5b508d4c

My official website.

src/components/PostNavigation.astro (view raw)

 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
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 
---
import Link from '@/components/Link.astro'
import { buttonVariants } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import { Icon } from 'astro-icon/components'

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

<div class="flex flex-col gap-4 sm:flex-row">
  <Link
    href={prevPost ? `/blog/${prevPost.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',
    )}
    aria-disabled={!prevPost}
  >
    <div class="mr-2 flex-shrink-0">
      <Icon
        name="lucide:arrow-left"
        class="size-4 transition-transform group-hover:-translate-x-1"
      />
    </div>
    <div class="flex flex-col items-start overflow-hidden">
      <span class="text-left text-xs text-muted-foreground">Previous Post</span>
      <span class="w-full truncate text-left text-sm"
        >{prevPost?.data.title || 'Latest post!'}</span
      >
    </div>
  </Link>
  <Link
    href={nextPost ? `/blog/${nextPost.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',
    )}
    aria-disabled={!nextPost}
  >
    <div class="flex flex-col items-end overflow-hidden">
      <span class="text-right text-xs text-muted-foreground">Next Post</span>
      <span class="w-full truncate text-right text-sm"
        >{nextPost?.data.title || 'Last post!'}</span
      >
    </div>
    <div class="ml-2 flex-shrink-0">
      <Icon
        name="lucide:arrow-right"
        class="size-4 transition-transform group-hover:translate-x-1"
      />
    </div>
  </Link>
</div>