blob: f1b76ceefe25b5f8b2a8732db2c91e3ac214f2aa (
plain) (
blame)
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
|
---
import Link from '@/components/Link.astro'
import { buttonVariants } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import { Icon } from 'astro-icon/components'
const { newerEvent, olderEvent } = Astro.props
---
<nav class={cn('col-start-2 grid grid-cols-1 gap-4', 'sm:grid-cols-2')}>
<Link
href={olderEvent ? `/events/${olderEvent.id}#event-title` : '#'}
class={cn(
buttonVariants({ variant: 'outline' }),
'rounded-lg group flex items-center justify-start size-full',
!olderEvent && 'pointer-events-none opacity-50 cursor-not-allowed',
)}
aria-disabled={!olderEvent}
>
<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">
Previous Event
</span>
<span class="w-full text-left text-sm text-balance text-ellipsis">
{olderEvent?.data.title || "You're at the oldest event!"}
</span>
</div>
</Link>
<Link
href={newerEvent ? `/events/${newerEvent.id}#event-title` : '#'}
class={cn(
buttonVariants({ variant: 'outline' }),
'rounded-lg group flex items-center justify-end size-full',
!newerEvent && 'pointer-events-none opacity-50 cursor-not-allowed',
)}
aria-disabled={!newerEvent}
>
<div class="flex flex-col items-end overflow-hidden text-wrap">
<span class="text-muted-foreground text-right text-xs"> Next Event </span>
<span class="w-full text-right text-sm text-balance text-ellipsis">
{newerEvent?.data.title || "You're at the newest event!"}
</span>
</div>
<Icon
name="lucide:arrow-right"
class="ml-2 size-4 transition-transform group-hover:translate-x-1"
/>
</Link>
</nav>
|
