Pagination with href

[while1618]

Change Type

Addition

Proposed Changes

Hi @huntabyte,

Is it possible to add an example of how to use pagination component with href in docs? I assume that this is a commonly used feature (original shadcn is supporting this), but I couldn't find anything in the shadcn-svelte. Looked through all the issues on both shadcn-svelte and bits-ui, but nothing.

I mentioned in this issue #945 what have I tried, but at the end I couldn't find a solution, so I ditched Pagination component completely and created my own, but it would be great if I could go back to shadcn-svelte one.

[asalimonov]

I support this request. Pagination with links allows web crawlers to index all content, not just the first page. It eliminates the need to spend time generating and updating sitemap.xml or similar.

[asalimonov]

It's my hack for implementing paging with links. Google and other crawlers are processed it successfully.

pagination-link.svelte:

<script lang="ts">
	import { Pagination as PaginationPrimitive } from 'bits-ui';
	import { type Props, buttonVariants } from '$lib/components/ui/button/index.js';
	import { cn } from '$lib/utils.js';

	type $$Props = PaginationPrimitive.PageProps &
		Props & {
			isActive: boolean;
			href?: string;
		};

	type $$Events = PaginationPrimitive.PageEvents;

	let className: $$Props['class'] = undefined;
	export let page: $$Props['page'];
	export let size: $$Props['size'] = 'icon';
	export let isActive: $$Props['isActive'] = false;
	export let href: $$Props['href'] = undefined;

	export { className as class };
</script>
{#if href !== undefined}
	<a {href}>
{/if}
		<PaginationPrimitive.Page
			bind:page
			class={cn(
				buttonVariants({
					variant: isActive ? 'outline' : 'ghost',
					size
				}),
				className
			)}
			{...$$restProps}
			on:click
		>
			<slot>{page.value}</slot>
		</PaginationPrimitive.Page>
{#if href !== undefined}
	</a>
{/if}

On a page:

<Pagination.Link
    {page}
    isActive={$Search.page !== page.value}
    href={$Search.page === page.value ? undefined : buildPageUrl(page.value)}
>
{page.value}
</Pagination.Link>