47 lines
1.1 KiB
Svelte
47 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import Button from "$components/ui/Button.svelte";
|
|
import { SlideDirection, type SlideDirectionType } from "$lib/constants";
|
|
import ChevronLeft from "~icons/lucide/chevron-left";
|
|
import ChevronRight from "~icons/lucide/chevron-right";
|
|
|
|
interface Props {
|
|
current: number;
|
|
direction: SlideDirectionType;
|
|
max: number;
|
|
}
|
|
|
|
let { current = $bindable(), direction = $bindable(SlideDirection.NEXT), max }: Props = $props();
|
|
|
|
let isFirst = $derived(current === 0);
|
|
let isLast = $derived(current === max - 1);
|
|
|
|
function prev() {
|
|
if (current > 0) current--;
|
|
direction = SlideDirection.PREV;
|
|
}
|
|
|
|
async function next() {
|
|
if (current < max - 1) current++;
|
|
direction = SlideDirection.NEXT;
|
|
}
|
|
</script>
|
|
|
|
<Button
|
|
icon={ChevronLeft}
|
|
ariaLabel="Previous slide"
|
|
size="mini"
|
|
onclick={prev}
|
|
disabled={isFirst}
|
|
/>
|
|
<span class="panel-indicator">{current + 1} / {max}</span>
|
|
<Button icon={ChevronRight} ariaLabel="Next slide" size="mini" onclick={next} disabled={isLast} />
|
|
|
|
<style>
|
|
.panel-indicator {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
min-width: 50px;
|
|
text-align: center;
|
|
}
|
|
</style>
|