Pagination

1import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-solid";
2import type { Component, JSX } from "solid-js";
3import { splitProps } from "solid-js";
4import { cn } from "~/lib/utils";
5import { buttonVariants } from "./button";
6 
7const Pagination: Component<JSX.HTMLAttributes<HTMLElement>> = (props) => {
8  const [local, rest] = splitProps(props, ["class"]);
9  return (
10    <nav
11      aria-label="pagination"
12      class={cn("mx-auto flex w-full justify-center", local.class)}
13      {...rest}
14    />
15  );
16};
17 
18const PaginationContent: Component<JSX.HTMLAttributes<HTMLUListElement>> = (props) => {
19  const [local, rest] = splitProps(props, ["class"]);
20  return <ul class={cn("flex flex-row items-center gap-1", local.class)} {...rest} />;
21};
22 
23const PaginationItem: Component<JSX.HTMLAttributes<HTMLLIElement>> = (props) => {
24  const [local, rest] = splitProps(props, ["class"]);
25  return <li class={cn("", local.class)} {...rest} />;
26};
27 
28type PaginationLinkProps = JSX.AnchorHTMLAttributes<HTMLAnchorElement> & {
29  isActive?: boolean;
30  size?: "default" | "sm" | "lg" | "icon";
31};
32 
33const PaginationLink: Component<PaginationLinkProps> = (props) => {
34  const [local, rest] = splitProps(props, ["class", "isActive", "size"]);
35  return (
36    <a
37      aria-current={local.isActive ? "page" : undefined}
38      class={cn(
39        buttonVariants({
40          variant: local.isActive ? "outline" : "ghost",
41          size: local.size ?? "icon",
42        }),
43        local.class,
44      )}
45      {...rest}
46    />
47  );
48};
49 
50const PaginationPrevious: Component<JSX.AnchorHTMLAttributes<HTMLAnchorElement>> = (props) => {
51  const [local, rest] = splitProps(props, ["class"]);
52  return (
53    <PaginationLink
54      aria-label="Go to previous page"
55      size="default"
56      class={cn("gap-1 pl-2.5", local.class)}
57      {...rest}
58    >
59      <ChevronLeft class="h-4 w-4" />
60      <span>Previous</span>
61    </PaginationLink>
62  );
63};
64 
65const PaginationNext: Component<JSX.AnchorHTMLAttributes<HTMLAnchorElement>> = (props) => {
66  const [local, rest] = splitProps(props, ["class"]);
67  return (
68    <PaginationLink
69      aria-label="Go to next page"
70      size="default"
71      class={cn("gap-1 pr-2.5", local.class)}
72      {...rest}
73    >
74      <span>Next</span>
75      <ChevronRight class="h-4 w-4" />
76    </PaginationLink>
77  );
78};
79 
80const PaginationEllipsis: Component<JSX.HTMLAttributes<HTMLSpanElement>> = (props) => {
81  const [local, rest] = splitProps(props, ["class"]);
82  return (
83    <span
84// … truncated