Pagination

1import * as React from "react";
2import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
3 
4import { cn } from "@/lib/utils";
5import { ButtonProps, buttonVariants } from "@/components/ui/atoms/button";
6 
7const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
8  <nav
9    role="navigation"
10    aria-label="pagination"
11    className={cn("mx-auto flex w-full justify-center", className)}
12    {...props}
13  />
14);
15Pagination.displayName = "Pagination";
16 
17const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
18  ({ className, ...props }, ref) => (
19    <ul
20      ref={ref}
21      className={cn(
22        "flex max-w-full flex-row flex-nowrap items-center justify-start gap-1 overflow-x-auto scrollbar-none sm:justify-center",
23        "transition-[color,background-color,border-color] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]",
24        className,
25      )}
26      {...props}
27    />
28  ),
29);
30PaginationContent.displayName = "PaginationContent";
31 
32const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
33  ({ className, ...props }, ref) => <li ref={ref} className={cn("", className)} {...props} />,
34);
35PaginationItem.displayName = "PaginationItem";
36 
37type PaginationLinkProps = {
38  isActive?: boolean;
39} & Pick<ButtonProps, "size"> &
40  React.ComponentProps<"a">;
41 
42const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
43  <a
44    aria-current={isActive ? "page" : undefined}
45    className={cn(
46      buttonVariants({
47        variant: "ghost",
48        size,
49        radius: "md",
50      }),
51      "transition-[color,background-color,border-color] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]",
52      isActive &&
53        "border border-primary/25 bg-primary-muted text-primary shadow-sm hover:border-primary/35 hover:bg-primary-muted hover:text-primary",
54      className,
55    )}
56    {...props}
57  />
58);
59PaginationLink.displayName = "PaginationLink";
60 
61const PaginationPrevious = ({
62  className,
63  ...props
64}: React.ComponentProps<typeof PaginationLink>) => (
65  <PaginationLink
66    aria-label="Go to previous page"
67    size="default"
68    className={cn("group gap-1 pl-2.5", className)}
69    {...props}
70  >
71    <ChevronLeft className="h-4 w-4" />
72    <span className="hidden sm:inline">Previous</span>
73  </PaginationLink>
74);
75PaginationPrevious.displayName = "PaginationPrevious";
76 
77// … truncated