Pagination

1import type { JSX, ValidComponent } from "solid-js"
2import { Show, splitProps } from "solid-js"
3 
4import * as PaginationPrimitive from "@kobalte/core/pagination"
5import type { PolymorphicProps } from "@kobalte/core/polymorphic"
6 
7import { cn } from "~/lib/utils"
8import { buttonVariants } from "~/registry/ui/button"
9 
10const PaginationItems = PaginationPrimitive.Items
11 
12type PaginationRootProps<T extends ValidComponent = "nav"> =
13  PaginationPrimitive.PaginationRootProps<T> & { class?: string | undefined }
14 
15const Pagination = <T extends ValidComponent = "nav">(
16  props: PolymorphicProps<T, PaginationRootProps<T>>
17) => {
18  const [local, others] = splitProps(props as PaginationRootProps, ["class"])
19  return (
20    <PaginationPrimitive.Root
21      class={cn("[&>*]:flex [&>*]:flex-row [&>*]:items-center [&>*]:gap-1", local.class)}
22      {...others}
23    />
24  )
25}
26 
27type PaginationItemProps<T extends ValidComponent = "button"> =
28  PaginationPrimitive.PaginationItemProps<T> & { class?: string | undefined }
29 
30const PaginationItem = <T extends ValidComponent = "button">(
31  props: PolymorphicProps<T, PaginationItemProps<T>>
32) => {
33  const [local, others] = splitProps(props as PaginationItemProps, ["class"])
34  return (
35    <PaginationPrimitive.Item
36      class={cn(
37        buttonVariants({
38          variant: "ghost"
39        }),
40        "size-10 data-[current]:border",
41        local.class
42      )}
43      {...others}
44    />
45  )
46}
47 
48type PaginationEllipsisProps<T extends ValidComponent = "div"> =
49  PaginationPrimitive.PaginationEllipsisProps<T> & {
50    class?: string | undefined
51  }
52 
53const PaginationEllipsis = <T extends ValidComponent = "div">(
54  props: PolymorphicProps<T, PaginationEllipsisProps<T>>
55) => {
56  const [local, others] = splitProps(props as PaginationEllipsisProps, ["class"])
57  return (
58    <PaginationPrimitive.Ellipsis
59      class={cn("flex size-10 items-center justify-center", local.class)}
60      {...others}
61    >
62      <svg
63        xmlns="http://www.w3.org/2000/svg"
64        viewBox="0 0 24 24"
65        fill="none"
66        stroke="currentColor"
67        stroke-width="2"
68        stroke-linecap="round"
69        stroke-linejoin="round"
70        class="size-4"
71      >
72        <circle cx="12" cy="12" r="1" />
73        <circle cx="19" cy="12" r="1" />
74        <circle cx="5" cy="12" r="1" />
75      </svg>
76      <span class="sr-only">More pages</span>
77    </PaginationPrimitive.Ellipsis>
78  )
79}
80 
81type PaginationPreviousProps<T extends ValidComponent = "button"> =
82// … truncated