spb/vquant Public MIT

1/*2 * =============================================================================3 *  VibeQuant (vquant) — AI-Powered Financial Intelligence Platform4 * -----------------------------------------------------------------------------5 *  File:      client/src/components/ui/pagination.tsx6 *7 *  Author:    Simon-Pierre Boucher8 *  Contact:   contact@spboucher.ai9 *  Website:   https://www.spboucher.ai10 *  Demo:      https://www.vquant.ai11 *  License:   MIT (see LICENSE)12 *13 *  Copyright © 2026 Simon-Pierre Boucher. All rights reserved.14 * =============================================================================15 */1617import * as React from "react"18import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"1920import { cn } from "@/lib/utils"21import { ButtonProps, buttonVariants } from "@/components/ui/button"2223const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (24  <nav25    role="navigation"26    aria-label="pagination"27    className={cn("mx-auto flex w-full justify-center", className)}28    {...props}29  />30)31Pagination.displayName = "Pagination"3233const PaginationContent = React.forwardRef<34  HTMLUListElement,35  React.ComponentProps<"ul">36>(({ className, ...props }, ref) => (37  <ul38    ref={ref}39    className={cn("flex flex-row items-center gap-1", className)}40    {...props}41  />42))43PaginationContent.displayName = "PaginationContent"4445const PaginationItem = React.forwardRef<46  HTMLLIElement,47  React.ComponentProps<"li">48>(({ className, ...props }, ref) => (49  <li ref={ref} className={cn("", className)} {...props} />50))51PaginationItem.displayName = "PaginationItem"5253type PaginationLinkProps = {54  isActive?: boolean55} & Pick<ButtonProps, "size"> &56  React.ComponentProps<"a">5758const PaginationLink = ({59  className,60  isActive,61  size = "icon",62  ...props63}: PaginationLinkProps) => (64  <a65    aria-current={isActive ? "page" : undefined}66    className={cn(67      buttonVariants({68        variant: isActive ? "outline" : "ghost",69        size,70      }),71      className72    )}73    {...props}74  />75)76PaginationLink.displayName = "PaginationLink"7778const PaginationPrevious = ({79  className,80  ...props81}: React.ComponentProps<typeof PaginationLink>) => (82  <PaginationLink83    aria-label="Go to previous page"84    size="default"85    className={cn("gap-1 pl-2.5", className)}86    {...props}87  >88    <ChevronLeft className="h-4 w-4" />89    <span>Previous</span>90  </PaginationLink>91)92PaginationPrevious.displayName = "PaginationPrevious"9394const PaginationNext = ({95  className,96  ...props97}: React.ComponentProps<typeof PaginationLink>) => (98  <PaginationLink99    aria-label="Go to next page"100    size="default"101    className={cn("gap-1 pr-2.5", className)}102    {...props}103  >104    <span>Next</span>105    <ChevronRight className="h-4 w-4" />106  </PaginationLink>107)108PaginationNext.displayName = "PaginationNext"109110const PaginationEllipsis = ({111  className,112  ...props113}: React.ComponentProps<"span">) => (114  <span115    aria-hidden116    className={cn("flex h-9 w-9 items-center justify-center", className)}117    {...props}118  >119    <MoreHorizontal className="h-4 w-4" />120    <span className="sr-only">More pages</span>121  </span>122)123PaginationEllipsis.displayName = "PaginationEllipsis"124125export {126  Pagination,127  PaginationContent,128  PaginationEllipsis,129  PaginationItem,130  PaginationLink,131  PaginationNext,132  PaginationPrevious,133}134