Pagination

import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from "@/components/ui/pagination";

export default function Example() {
  return <Pagination />;
}

"use client";

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Pagination = forwardRef(({ className, ...props }, ref) => (
  <nav ref={ref} role="navigation" aria-label="pagination" className={cn("mx-auto flex w-full justify-center", className)} {...props} />
));
Pagination.displayName = "Pagination";

const PaginationContent = forwardRef(({ className, ...props }, ref) => (
  <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
));
PaginationContent.displayName = "PaginationContent";

const PaginationItem = forwardRef(({ className, ...props }, ref) => (
  <li ref={ref} className={cn("", className)} {...props} />
));
PaginationItem.displayName = "PaginationItem";

const PaginationLink = forwardRef(({ className, isActive, ...props }, ref) => (
  <a ref={ref}
    className={cn("flex h-9 min-w-9 items-center justify-center rounded-md border px-3 text-sm font-medium transition-colors hover:bg-accent hover:text-foreground",
      isActive ? "border-primary bg-primary text-primary-foreground" : "border-transparent text-muted-foreground",
      className
    )}
    {...props}
  />
));
PaginationLink.displayName = "PaginationLink";

const PaginationPrevious = forwardRef(({ className, ...props }, ref) => (
  <PaginationLink ref={ref} aria-label="Go to previous page" className={cn("gap-1 pl-2.5", className)} {...props}>
    <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
    <span>Previous</span>
  </PaginationLink>
));
PaginationPrevious.displayName = "PaginationPrevious";

const PaginationNext = forwardRef(({ className, ...props }, ref) => (
  <PaginationLink ref={ref} aria-label="Go to next page" className={cn("gap-1 pr-2.5", className)} {...props}>
    <span>Next</span>
    <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
  </PaginationLink>
));
PaginationNext.displayName = "PaginationNext";

const PaginationEllipsis = ({ className, ...props }) => (
  <span className={cn("flex h-9 w-9 items-center justify-center text-muted-foreground", className)} {...props}>⋯</span>
);
PaginationEllipsis.displayName = "PaginationEllipsis";

export { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis };