path: root/frontend/src/lib/pagination/Target.svelte

<script lang="ts">
	import { page } from '$app/state';
	import { navigate } from '$lib/Navigation';
	import type { Snippet } from 'svelte';

	interface Props {
		active?: boolean;
		disabled?: boolean;
		target: number;
		children?: Snippet;
	}

	let { active = false, disabled = false, target, children }: Props = $props();

	function onclick() {
		navigate({ pagination: { page: target } }, page.url.searchParams);
	}
</script>

<button
	{onclick}
	class:bg-slate-700={active}
	class:bg-slate-800={!active}
	class="flex h-8 w-8 items-center justify-center rounded-sm p-0 text-base hover:text-white disabled:text-slate-600"
	{disabled}
>
	{@render children?.()}
</button>