Pagination

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import type { JSX, ValidComponent } from "solid-js";
3

4
import { Show, splitProps } from "solid-js";
5
import * as PaginationPrimitive from "@kobalte/core/pagination";
6
import ChevronLeftIcon from "lucide-solid/icons/chevron-left";
7
import ChevronRightIcon from "lucide-solid/icons/chevron-right";
8
import EllipsisIcon from "lucide-solid/icons/ellipsis";
9

10
import { buttonVariants } from "~/components/ui/button";
11
import { cn } from "~/lib/utils";
12

13
type PaginationRootProps<T extends ValidComponent = "nav"> =
14
  PaginationPrimitive.PaginationRootProps<T> & {
15
    class?: string | undefined;
16
    wrap?: boolean | undefined;
17
  };
18

19
const Pagination = <T extends ValidComponent = "nav">(
20
  props: PolymorphicProps<T, PaginationRootProps<T>>,
21
) => {
22
  const [local, others] = splitProps(props as PaginationRootProps, [
23
    "class",
24
    "wrap",
25
  ]);
26
  return (
27
    <PaginationPrimitive.Root
28
      data-slot="pagination"
29
      class={cn(
30
        "[&>*]:flex [&>*]:flex-row [&>*]:items-center [&>*]:gap-1 data-[wrap=true]:[&>*]:flex-wrap",
31
        local.class,
32
      )}
33
      {...others}
34
      data-wrap={local.wrap ? "true" : "false"}
35
    />
36
  );
37
};
38

39
const PaginationItems = (props: PaginationPrimitive.PaginationItemsProps) => {
40
  return <PaginationPrimitive.Items {...props} data-slot="pagination-items" />;
41
};
42

43
type PaginationItemProps<T extends ValidComponent = "button"> =
44
  PaginationPrimitive.PaginationItemProps<T> & { class?: string | undefined };
45

46
const PaginationItem = <T extends ValidComponent = "button">(
47
  props: PolymorphicProps<T, PaginationItemProps<T>>,
48
) => {
49
  const [local, others] = splitProps(props as PaginationItemProps, ["class"]);
50
  return (
51
    <PaginationPrimitive.Item
52
      data-slot="pagination-item"
53
      class={cn(
54
        buttonVariants({
55
          variant: "neutral-no-shadow",
56
        }),
57
        "size-10 ui-current:bg-primary ui-current:text-primary-foreground ui-current:hover:bg-primary/80",
58
        local.class,
59
      )}
60
      {...others}
61
    />
62
  );
63
};
64

65
type PaginationEllipsisProps<T extends ValidComponent = "div"> =
66
  PaginationPrimitive.PaginationEllipsisProps<T> & {
67
    class?: string | undefined;
68
  };
69

70
const PaginationEllipsis = <T extends ValidComponent = "div">(
71
  props: PolymorphicProps<T, PaginationEllipsisProps<T>>,
72
) => {
73
  const [local, others] = splitProps(props as PaginationEllipsisProps, [
74
    "class",
75
  ]);
76
  return (
77
    <PaginationPrimitive.Ellipsis
78
      data-slot="pagination-ellipsis"
79
      class={cn("flex size-10 items-center justify-center", local.class)}
80
      {...others}
81
    >
82
      <EllipsisIcon class="size-4" />
83
      <span class="sr-only">More pages</span>
84
    </PaginationPrimitive.Ellipsis>
85
  );
86
};
87

88
type PaginationPreviousProps<T extends ValidComponent = "button"> =
89
  PaginationPrimitive.PaginationPreviousProps<T> & {
90
    class?: string | undefined;
91
    children?: JSX.Element;
92
  };
93

94
const PaginationPrevious = <T extends ValidComponent = "button">(
95
  props: PolymorphicProps<T, PaginationPreviousProps<T>>,
96
) => {
97
  const [local, others] = splitProps(props as PaginationPreviousProps, [
98
    "class",
99
    "children",
100
  ]);
101
  return (
102
    <PaginationPrimitive.Previous
103
      data-slot="pagination-previous"
104
      class={cn(
105
        buttonVariants({
106
          variant: "neutral-no-shadow",
107
        }),
108
        "gap-1 pl-2.5",
109
        local.class,
110
      )}
111
      {...others}
112
    >
113
      <Show
114
        when={local.children}
115
        fallback={
116
          <>
117
            <ChevronLeftIcon class="size-4" />
118
            <span>Previous</span>
119
          </>
120
        }
121
      >
122
        {(children) => children()}
123
      </Show>
124
    </PaginationPrimitive.Previous>
125
  );
126
};
127

128
type PaginationNextProps<T extends ValidComponent = "button"> =
129
  PaginationPrimitive.PaginationNextProps<T> & {
130
    class?: string | undefined;
131
    children?: JSX.Element;
132
  };
133

134
const PaginationNext = <T extends ValidComponent = "button">(
135
  props: PolymorphicProps<T, PaginationNextProps<T>>,
136
) => {
137
  const [local, others] = splitProps(props as PaginationNextProps, [
138
    "class",
139
    "children",
140
  ]);
141
  return (
142
    <PaginationPrimitive.Next
143
      data-slot="pagination-next"
144
      class={cn(
145
        buttonVariants({
146
          variant: "neutral-no-shadow",
147
        }),
148
        "gap-1 pr-2.5",
149
        local.class,
150
      )}
151
      {...others}
152
    >
153
      <Show
154
        when={local.children}
155
        fallback={
156
          <>
157
            <span>Next</span>
158
            <ChevronRightIcon class="size-4" />
159
          </>
160
        }
161
      >
162
        {(children) => children()}
163
      </Show>
164
    </PaginationPrimitive.Next>
165
  );
166
};
167

168
export {
169
  Pagination,
170
  PaginationItems,
171
  PaginationItem,
172
  PaginationEllipsis,
173
  PaginationPrevious,
174
  PaginationNext,
175
};