summaryrefslogtreecommitdiff
path: root/apps/web/src/components/ui/pagination.tsx
diff options
context:
space:
mode:
authorHyteq <DerpsDer.es@gmail.com>2025-07-20 11:00:22 +0300
committerHyteq <DerpsDer.es@gmail.com>2025-07-20 11:00:22 +0300
commitbe1ae20d9089e81cb84a8294be76fe680a24b60f (patch)
tree48472c1122d35f45f802bbd1c3cf2c15f653f9cf /apps/web/src/components/ui/pagination.tsx
parentede08dac416b47eac2db151969c164bdf0f06002 (diff)
downloadopencut-be1ae20d9089e81cb84a8294be76fe680a24b60f.tar.gz
format
Diffstat (limited to 'apps/web/src/components/ui/pagination.tsx')
-rw-r--r--apps/web/src/components/ui/pagination.tsx144
1 files changed, 72 insertions, 72 deletions
diff --git a/apps/web/src/components/ui/pagination.tsx b/apps/web/src/components/ui/pagination.tsx
index 61766cec..ad132ee5 100644
--- a/apps/web/src/components/ui/pagination.tsx
+++ b/apps/web/src/components/ui/pagination.tsx
@@ -5,113 +5,113 @@ import { cn } from "../../lib/utils";
import { ButtonProps, buttonVariants } from "./button";
const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
- <nav
- role="navigation"
- aria-label="pagination"
- className={cn("mx-auto flex w-full justify-center", className)}
- {...props}
- />
+ <nav
+ role="navigation"
+ aria-label="pagination"
+ className={cn("mx-auto flex w-full justify-center", className)}
+ {...props}
+ />
);
Pagination.displayName = "Pagination";
const PaginationContent = React.forwardRef<
- HTMLUListElement,
- React.ComponentProps<"ul">
+ HTMLUListElement,
+ React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
- <ul
- ref={ref}
- className={cn("flex flex-row items-center gap-1", className)}
- {...props}
- />
+ <ul
+ ref={ref}
+ className={cn("flex flex-row items-center gap-1", className)}
+ {...props}
+ />
));
PaginationContent.displayName = "PaginationContent";
const PaginationItem = React.forwardRef<
- HTMLLIElement,
- React.ComponentProps<"li">
+ HTMLLIElement,
+ React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
- <li ref={ref} className={cn("", className)} {...props} />
+ <li ref={ref} className={cn("", className)} {...props} />
));
PaginationItem.displayName = "PaginationItem";
type PaginationLinkProps = {
- isActive?: boolean;
+ isActive?: boolean;
} & Pick<ButtonProps, "size"> &
- React.ComponentProps<"a">;
+ React.ComponentProps<"a">;
const PaginationLink = ({
- className,
- isActive,
- size = "icon",
- ...props
+ className,
+ isActive,
+ size = "icon",
+ ...props
}: PaginationLinkProps) => (
- <a
- aria-current={isActive ? "page" : undefined}
- className={cn(
- buttonVariants({
- variant: isActive ? "outline" : "text",
- size,
- }),
- className
- )}
- {...props}
- />
+ <a
+ aria-current={isActive ? "page" : undefined}
+ className={cn(
+ buttonVariants({
+ variant: isActive ? "outline" : "text",
+ size,
+ }),
+ className,
+ )}
+ {...props}
+ />
);
PaginationLink.displayName = "PaginationLink";
const PaginationPrevious = ({
- className,
- ...props
+ className,
+ ...props
}: React.ComponentProps<typeof PaginationLink>) => (
- <PaginationLink
- aria-label="Go to previous page"
- size="default"
- className={cn("gap-1 pl-2.5", className)}
- {...props}
- >
- <ChevronLeft className="h-4 w-4" />
- <span>Previous</span>
- </PaginationLink>
+ <PaginationLink
+ aria-label="Go to previous page"
+ size="default"
+ className={cn("gap-1 pl-2.5", className)}
+ {...props}
+ >
+ <ChevronLeft className="h-4 w-4" />
+ <span>Previous</span>
+ </PaginationLink>
);
PaginationPrevious.displayName = "PaginationPrevious";
const PaginationNext = ({
- className,
- ...props
+ className,
+ ...props
}: React.ComponentProps<typeof PaginationLink>) => (
- <PaginationLink
- aria-label="Go to next page"
- size="default"
- className={cn("gap-1 pr-2.5", className)}
- {...props}
- >
- <span>Next</span>
- <ChevronRight className="h-4 w-4" />
- </PaginationLink>
+ <PaginationLink
+ aria-label="Go to next page"
+ size="default"
+ className={cn("gap-1 pr-2.5", className)}
+ {...props}
+ >
+ <span>Next</span>
+ <ChevronRight className="h-4 w-4" />
+ </PaginationLink>
);
PaginationNext.displayName = "PaginationNext";
const PaginationEllipsis = ({
- className,
- ...props
+ className,
+ ...props
}: React.ComponentProps<"span">) => (
- <span
- aria-hidden
- className={cn("flex h-9 w-9 items-center justify-center", className)}
- {...props}
- >
- <MoreHorizontal className="h-4 w-4" />
- <span className="sr-only">More pages</span>
- </span>
+ <span
+ aria-hidden
+ className={cn("flex h-9 w-9 items-center justify-center", className)}
+ {...props}
+ >
+ <MoreHorizontal className="h-4 w-4" />
+ <span className="sr-only">More pages</span>
+ </span>
);
PaginationEllipsis.displayName = "PaginationEllipsis";
export {
- Pagination,
- PaginationContent,
- PaginationLink,
- PaginationItem,
- PaginationPrevious,
- PaginationNext,
- PaginationEllipsis,
+ Pagination,
+ PaginationContent,
+ PaginationLink,
+ PaginationItem,
+ PaginationPrevious,
+ PaginationNext,
+ PaginationEllipsis,
};