| 1 | <script lang="ts"> |
| 2 | import { base } from '$app/paths'; |
| 3 | import type { FlatNavItem } from '$lib/nav'; |
| 4 | |
| 5 | interface Props { |
| 6 | prev: FlatNavItem | null; |
| 7 | next: FlatNavItem | null; |
| 8 | } |
| 9 | |
| 10 | let { prev, next }: Props = $props(); |
| 11 | </script> |
| 12 | |
| 13 | {#if prev || next} |
| 14 | <nav class="not-prose mt-12 grid grid-cols-1 gap-4 {prev && next ? 'sm:grid-cols-2' : ''}" aria-label="Page navigation"> |
| 15 | {#if prev} |
| 16 | <a |
| 17 | href="{base}{prev.href}" |
| 18 | class="group flex items-center gap-4 rounded-lg border border-border/70 px-5 py-5 transition-colors hover:border-primary/40" |
| 19 | > |
| 20 | <svg |
| 21 | class="size-5 shrink-0 text-text-muted transition-transform group-hover:-translate-x-0.5" |
| 22 | xmlns="http://www.w3.org/2000/svg" |
| 23 | fill="none" |
| 24 | viewBox="0 0 24 24" |
| 25 | stroke-width="2" |
| 26 | stroke="currentColor" |
| 27 | aria-hidden="true" |
| 28 | > |
| 29 | <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /> |
| 30 | </svg> |
| 31 | <div class="min-w-0"> |
| 32 | <span class="block text-sm font-medium text-text-muted">Previous</span> |
| 33 | <span class="block text-sm text-text-muted">{prev.section}</span> |
| 34 | <span class="block truncate font-display text-base font-semibold text-foreground"> |
| 35 | {prev.title} |
| 36 | </span> |
| 37 | </div> |
| 38 | </a> |
| 39 | {/if} |
| 40 | |
| 41 | {#if next} |
| 42 | <a |
| 43 | href="{base}{next.href}" |
| 44 | class="group flex items-center justify-end gap-4 rounded-lg border border-border/70 px-5 py-5 text-right transition-colors hover:border-primary/40" |
| 45 | > |
| 46 | <div class="min-w-0"> |
| 47 | <span class="block text-sm font-medium text-text-muted">Next</span> |
| 48 | <span class="block text-sm text-text-muted">{next.section}</span> |
| 49 | <span class="block truncate font-display text-base font-semibold text-foreground"> |
| 50 | {next.title} |
| 51 | </span> |
| 52 | </div> |
| 53 | <svg |
| 54 | class="size-5 shrink-0 text-text-muted transition-transform group-hover:translate-x-0.5" |
| 55 | xmlns="http://www.w3.org/2000/svg" |
| 56 | fill="none" |
| 57 | viewBox="0 0 24 24" |
| 58 | stroke-width="2" |
| 59 | stroke="currentColor" |
| 60 | aria-hidden="true" |
| 61 | > |
| 62 | <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /> |
| 63 | </svg> |
| 64 | </a> |
| 65 | {/if} |
| 66 | </nav> |
| 67 | {/if} |