diff options
Diffstat (limited to 'apps/web/src/components/ui/pagination.tsx')
| -rw-r--r-- | apps/web/src/components/ui/pagination.tsx | 148 |
1 files changed, 74 insertions, 74 deletions
diff --git a/apps/web/src/components/ui/pagination.tsx b/apps/web/src/components/ui/pagination.tsx index 61766cec..96eec969 100644 --- a/apps/web/src/components/ui/pagination.tsx +++ b/apps/web/src/components/ui/pagination.tsx @@ -1,117 +1,117 @@ import * as React from "react"; import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"; -import { cn } from "../../lib/utils"; -import { ButtonProps, buttonVariants } from "./button"; +import { cn } from "@/utils/ui"; +import { type 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="size-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="size-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 size-9 items-center justify-center", className)} + {...props} + > + <MoreHorizontal className="size-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, }; |
