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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
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, baseURL } = 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 ? `${baseURL}${olderPost.id}#post-title` : '#'}
class={cn(
buttonVariants({ variant: 'outline' }),
'rounded-lg group flex items-center justify-start size-full',
!olderPost && 'pointer-events-none opacity-0 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 ? `${baseURL}${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 ? `${baseURL}${newerPost.id}#post-title` : '#'}
class={cn(
buttonVariants({ variant: 'outline' }),
'rounded-lg group flex items-center justify-end size-full',
!newerPost && 'pointer-events-none opacity-0 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>
|
