boredgame/src/lib/components/ui/pagination/pagination.svelte

34 lines
803 B
Svelte

<script lang="ts">
import { Pagination as PaginationPrimitive } from "bits-ui";
import { cn } from "$lib/utils";
type $$Props = PaginationPrimitive.Props;
type $$Events = PaginationPrimitive.Events;
let className: $$Props["class"] = undefined;
export let count: $$Props["count"] = 0;
export let perPage: $$Props["perPage"] = 10;
export let page: $$Props["page"] = 1;
export let siblingCount: $$Props["siblingCount"] = 1;
export { className as class };
$: currentPage = page;
</script>
<PaginationPrimitive.Root
{count}
{perPage}
{siblingCount}
bind:page
let:builder
let:pages
let:range
asChild
{...$$restProps}
>
<nav {...builder} class={cn("mx-auto flex w-full flex-col items-center", className)}>
<slot {pages} {range} {currentPage} />
</nav>
</PaginationPrimitive.Root>