55 lines
1.6 KiB
Svelte
55 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { Button } from '$lib/components/ui/button';
|
|
import ChevronLeft from '@lucide/svelte/icons/chevron-left';
|
|
import ChevronRight from '@lucide/svelte/icons/chevron-right';
|
|
import List from '@lucide/svelte/icons/list';
|
|
|
|
interface Props {
|
|
novelId: string;
|
|
prevChapterOrder: number | null | undefined;
|
|
nextChapterOrder: number | null | undefined;
|
|
showKeyboardHints?: boolean;
|
|
}
|
|
|
|
let { novelId, prevChapterOrder, nextChapterOrder, showKeyboardHints = true }: Props = $props();
|
|
|
|
const hasPrev = $derived(prevChapterOrder != null);
|
|
const hasNext = $derived(nextChapterOrder != null);
|
|
</script>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<Button
|
|
variant="outline"
|
|
href={hasPrev ? `/novels/${novelId}/chapters/${prevChapterOrder}` : undefined}
|
|
disabled={!hasPrev}
|
|
class="gap-2"
|
|
>
|
|
<ChevronLeft class="h-4 w-4" />
|
|
<span class="hidden sm:inline">Previous</span>
|
|
</Button>
|
|
|
|
<Button variant="outline" href="/novels/{novelId}" class="gap-2">
|
|
<List class="h-4 w-4" />
|
|
<span class="hidden sm:inline">Contents</span>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
href={hasNext ? `/novels/${novelId}/chapters/${nextChapterOrder}` : undefined}
|
|
disabled={!hasNext}
|
|
class="gap-2"
|
|
>
|
|
<span class="hidden sm:inline">Next</span>
|
|
<ChevronRight class="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{#if showKeyboardHints}
|
|
<p class="text-muted-foreground hidden text-center text-xs md:block">
|
|
Use <kbd class="bg-muted rounded px-1 py-0.5 text-xs">←</kbd> and
|
|
<kbd class="bg-muted rounded px-1 py-0.5 text-xs">→</kbd> arrow keys to navigate
|
|
</p>
|
|
{/if}
|
|
</div>
|