pagination

1import * as PaginationPrimitive from "@kobalte/core/pagination";
2import type { PolymorphicProps } from "@kobalte/core/polymorphic";
3 
4import { cn } from "~/lib/utils.ts";
5import IconChevronLeft from "~icons/lucide/chevron-left";
6import IconChevronRight from "~icons/lucide/chevron-right";
7import IconEllipsis from "~icons/lucide/ellipsis";
8import type { JSX, ValidComponent } from "solid-js";
9 
10import { children, Show, splitProps } from "solid-js";
11import type { ButtonProps } from "./button.tsx";
12import { buttonVariants } from "./button.tsx";
13 
14const PaginationItems = PaginationPrimitive.Items;
15 
16type PaginationRootProps<T extends ValidComponent = "nav"> =
17  & PaginationPrimitive.PaginationRootProps<T>
18  & { class?: string | undefined };
19 
20const Pagination = <T extends ValidComponent = "nav">(
21  props: PolymorphicProps<T, PaginationRootProps<T>>,
22) => {
23  const [local, others] = splitProps(props as PaginationRootProps, ["class"]);
24  return (
25    <PaginationPrimitive.Root
26      role="navigation"
27      aria-label="pagination"
28      data-slot="pagination"
29      class={cn(
30        "[&>ul]:gap-0.5 mx-auto flex w-full justify-center",
31        // Kobalte renders the list itself, so the `pagination-content` styles
32        // are applied from here.
33        "[&>ul]:gap-0.5 [&>ul]:flex [&>ul]:items-center",
34        local.class,
35      )}
36      {...others}
37    />
38  );
39};
40 
41type PaginationItemProps<T extends ValidComponent = "button"> =
42  & PaginationPrimitive.PaginationItemProps<T>
43  & {
44    class?: string | undefined;
45    size?: ButtonProps["size"];
46  };
47 
48const PaginationItem = <T extends ValidComponent = "button">(
49  props: PolymorphicProps<T, PaginationItemProps<T>>,
50) => {
51  const [local, others] = splitProps(props as PaginationItemProps, [
52    "class",
53    "size",
54  ]);
55  return (
56    <PaginationPrimitive.Item
57      data-slot="pagination-link"
58      class={cn(
59        buttonVariants({
60          variant: "ghost",
61          size: local.size ?? "icon",
62        }),
63        // Kobalte marks the current page with `data-current`, so the outline
64        // variant is applied from here instead of swapping variants.
65        "dark:data-[current]:border-input dark:data-[current]:bg-input/30 dark:data-[current]:hover:bg-input/50 data-[current]:border-border data-[current]:bg-background data-[current]:hover:bg-muted",
66        local.class,
67      )}
68      {...others}
69    />
70  );
71};
72 
73type PaginationEllipsisProps<T extends ValidComponent = "div"> =
74// … truncated