Using astro-erudite for static site generation

1 files changed, 94 insertions, 0 deletions

diff --git a/src/components/PostNavigation.astro b/src/components/PostNavigation.astro
new file mode 100644
index 0000000..8dc2db5
--- /dev/null
+++ b/src/components/PostNavigation.astro
@@ -0,0 +1,94 @@
+---
+import Link from '@/components/Link.astro'
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { Icon } from 'astro-icon/components'
+
+const { newerPost, olderPost, parentPost } = Astro.props
+const isSubpost = !!parentPost
+---
+
+<nav
+  class={cn(
+    'col-start-2 grid grid-cols-1 gap-4',
+    isSubpost ? 'sm:grid-cols-3' : 'sm:grid-cols-2',
+  )}
+>
+  <Link
+    href={olderPost ? `/blog/${olderPost.id}#post-title` : '#'}
+    class={cn(
+      buttonVariants({ variant: 'outline' }),
+      'rounded-lg group flex items-center justify-start size-full',
+      !olderPost && 'pointer-events-none opacity-50 cursor-not-allowed',
+    )}
+    aria-disabled={!olderPost}
+  >
+    <Icon
+      name="lucide:arrow-left"
+      class="mr-2 size-4 transition-transform group-hover:-translate-x-1"
+    />
+    <div class="flex flex-col items-start overflow-hidden text-wrap">
+      <span class="text-muted-foreground text-left text-xs">
+        {isSubpost ? 'Previous Subpost' : 'Previous Post'}
+      </span>
+      <span class="w-full text-left text-sm text-balance text-ellipsis">
+        {
+          olderPost?.data.title ||
+            (isSubpost ? 'No older subpost' : "You're at the oldest post!")
+        }
+      </span>
+    </div>
+  </Link>
+
+  {
+    isSubpost && (
+      <Link
+        href={parentPost ? `/blog/${parentPost.id}#post-title` : '#'}
+        class={cn(
+          buttonVariants({ variant: 'outline' }),
+          'group flex size-full items-center justify-center rounded-lg',
+          !parentPost && 'pointer-events-none cursor-not-allowed opacity-50',
+        )}
+      >
+        <Icon
+          name="lucide:corner-left-up"
+          class="mr-2 size-4 transition-transform group-hover:-translate-y-1"
+        />
+        <div class="flex flex-col items-center overflow-hidden text-wrap">
+          <span class="text-muted-foreground text-center text-xs">
+            Parent Post
+          </span>
+          <span class="w-full text-center text-sm text-balance text-ellipsis">
+            {parentPost?.data.title || 'No parent post'}
+          </span>
+        </div>
+      </Link>
+    )
+  }
+
+  <Link
+    href={newerPost ? `/blog/${newerPost.id}#post-title` : '#'}
+    class={cn(
+      buttonVariants({ variant: 'outline' }),
+      'rounded-lg group flex items-center justify-end size-full',
+      !newerPost && 'pointer-events-none opacity-50 cursor-not-allowed',
+    )}
+    aria-disabled={!newerPost}
+  >
+    <div class="flex flex-col items-end overflow-hidden text-wrap">
+      <span class="text-muted-foreground text-right text-xs">
+        {isSubpost ? 'Next Subpost' : 'Next Post'}
+      </span>
+      <span class="w-full text-right text-sm text-balance text-ellipsis">
+        {
+          newerPost?.data.title ||
+            (isSubpost ? 'No newer subpost' : "You're at the newest post!")
+        }
+      </span>
+    </div>
+    <Icon
+      name="lucide:arrow-right"
+      class="ml-2 size-4 transition-transform group-hover:translate-x-1"
+    />
+  </Link>
+</nav>