Pagination

// Package pagination holds the site's example gsx components for
// ui/pagination.
package pagination

import "github.com/gsxhq/gsxui/ui"

// Basic renders a realistic prev/1/2/3/ellipsis/next trail with page 2
// active — the same shape as shadcn's own pagination-demo.tsx.
component Basic() {
	<ui.Pagination>
		<ui.PaginationContent>
			<ui.PaginationItem>
				<ui.PaginationPrevious href="#"/>
			</ui.PaginationItem>
			<ui.PaginationItem>
				<ui.PaginationLink href="#">1</ui.PaginationLink>
			</ui.PaginationItem>
			<ui.PaginationItem>
				<ui.PaginationLink href="#" isActive>2</ui.PaginationLink>
			</ui.PaginationItem>
			<ui.PaginationItem>
				<ui.PaginationLink href="#">3</ui.PaginationLink>
			</ui.PaginationItem>
			<ui.PaginationItem>
				<ui.PaginationEllipsis/>
			</ui.PaginationItem>
			<ui.PaginationItem>
				<ui.PaginationNext href="#"/>
			</ui.PaginationItem>
			<ui.PaginationItem>
				<ui.PaginationLink href="#" size="xs">xs</ui.PaginationLink>
			</ui.PaginationItem>
			<ui.PaginationItem>
				<ui.PaginationLink href="#" size="sm">sm</ui.PaginationLink>
			</ui.PaginationItem>
			<ui.PaginationItem>
				<ui.PaginationLink href="#" size="lg">lg</ui.PaginationLink>
			</ui.PaginationItem>
			<ui.PaginationItem>
				<ui.PaginationLink href="#" size="icon-xs" aria-label="Icon extra small">x</ui.PaginationLink>
			</ui.PaginationItem>
			<ui.PaginationItem>
				<ui.PaginationLink href="#" size="icon-sm" aria-label="Icon small">s</ui.PaginationLink>
			</ui.PaginationItem>
			<ui.PaginationItem>
				<ui.PaginationLink href="#" size="icon-lg" aria-label="Icon large">l</ui.PaginationLink>
			</ui.PaginationItem>
		</ui.PaginationContent>
	</ui.Pagination>
}

package pagination

import "github.com/gsxhq/gsxui/ui"

// Rtl mirrors Basic's prev/1/2/3/ellipsis/next trail wrapped in dir="rtl".
// Page numbers keep Latin digits — shadcn's own convention — while the
// prev/next chevrons flip via rtl:rotate-180 and the trail itself reads
// right-to-left.
component Rtl() {
	<div dir="rtl">
		<ui.Pagination>
			<ui.PaginationContent>
				<ui.PaginationItem>
					<ui.PaginationPrevious href="#"/>
				</ui.PaginationItem>
				<ui.PaginationItem>
					<ui.PaginationLink href="#">1</ui.PaginationLink>
				</ui.PaginationItem>
				<ui.PaginationItem>
					<ui.PaginationLink href="#" isActive>2</ui.PaginationLink>
				</ui.PaginationItem>
				<ui.PaginationItem>
					<ui.PaginationLink href="#">3</ui.PaginationLink>
				</ui.PaginationItem>
				<ui.PaginationItem>
					<ui.PaginationEllipsis/>
				</ui.PaginationItem>
				<ui.PaginationItem>
					<ui.PaginationNext href="#"/>
				</ui.PaginationItem>
			</ui.PaginationContent>
		</ui.Pagination>
	</div>
}