Pagination

pnpm dlx shadcn@latest add @whereui/pagination

import {  Pagination,  PaginationContent,  PaginationItem,  PaginationLink,  PaginationNext,  PaginationPrevious,} from "@/components/ui/pagination"<Pagination>  <PaginationContent>    <PaginationItem>      <PaginationPrevious href="#" text="ก่อนหน้า" />    </PaginationItem>    <PaginationItem>      <PaginationLink href="#">1</PaginationLink>    </PaginationItem>    <PaginationItem>      <PaginationNext href="#" text="ถัดไป" />    </PaginationItem>  </PaginationContent></Pagination>

import * as React from "react"import { cn } from "cn"import { Button } from "@/components/ui/button"import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"function Pagination({ className, ...props }: React.ComponentProps<"nav">) {  return (    <nav      role="navigation"      aria-label="pagination"      data-slot="pagination"      className={cn("mx-auto flex w-full justify-center", className)}      {...props}    />  )}function PaginationContent({  className,  ...props}: React.ComponentProps<"ul">) {  return (    <ul      data-slot="pagination-content"      className={cn("flex items-center gap-0.5", className)}      {...props}    />  )}function PaginationItem({ ...props }: React.ComponentProps<"li">) {  return <li data-slot="pagination-item" {...props} />}type PaginationLinkProps = {  isActive?: boolean} & Pick<React.ComponentProps<typeof Button>, "size"> &  React.ComponentProps<"a">function PaginationLink({  className,  isActive,  size = "icon",  ...props}: PaginationLinkProps) {  return (    <Button      variant={isActive ? "outline" : "ghost"}      size={size}      className={cn(className)}      nativeButton={false}      render={        <a          aria-current={isActive ? "page" : undefined}          data-slot="pagination-link"          data-active={isActive}          {...props}        />      }    />  )}function PaginationPrevious({  className,  text = "Previous",  ...props}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {  return (    <PaginationLink      aria-label="Go to previous page"      size="default"      className={cn("pl-1.5!", className)}      {...props}    >      <ChevronLeftIcon data-icon="inline-start" />      <span className="hidden sm:block">{text}</span>    </PaginationLink>  )}function PaginationNext({  className,  text = "Next",  ...props}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {  return (    <PaginationLink      aria-label="Go to next page"      size="default"      className={cn("pr-1.5!", className)}      {...props}    >      <span className="hidden sm:block">{text}</span>      <ChevronRightIcon data-icon="inline-end" />    </PaginationLink>  )}function PaginationEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      aria-hidden      data-slot="pagination-ellipsis"      className={cn(        "flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",        className      )}      {...props}    >      <MoreHorizontalIcon      />      <span className="sr-only">More pages</span>    </span>  )}export {  Pagination,  PaginationContent,  PaginationEllipsis,  PaginationItem,  PaginationLink,  PaginationNext,  PaginationPrevious,}