Components
Loading preview...
Enhanced shadcn/ui pagination
npx shadcn@latest add https://21st.dev/r/originui/paginationimport { Button } from "@/components/ui/button";
import { Pagination, PaginationContent, PaginationItem } from "@/components/ui/pagination";
import { ArrowLeft, ArrowRight } from "lucide-react";
type PaginationProps = {
currentPage: number;
totalPages: number;
};
function Component({ currentPage, totalPages }: PaginationProps) {
return (
<Pagination>
<PaginationContent className="w-full justify-between gap-3">
<PaginationItem>
<Button
variant="ghost"
className="group aria-disabled:pointer-events-none aria-disabled:opacity-50"
aria-disabled={currentPage === 1 ? true : undefined}
role={currentPage === 1 ? "link" : undefined}
>
<ArrowLeft
className="-ms-1 me-2 opacity-60 transition-transform group-hover:-translate-x-0.5"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
Previous
</Button>
</PaginationItem>
<PaginationItem>
<Button
variant="ghost"
className="group aria-disabled:pointer-events-none aria-disabled:opacity-50"
aria-disabled={currentPage === totalPages ? true : undefined}
role={currentPage === totalPages ? "link" : undefined}
>
Next
<ArrowRight
className="-me-1 ms-2 opacity-60 transition-transform group-hover:translate-x-0.5"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
</Button>
</PaginationItem>
</PaginationContent>
</Pagination>
);
}
export { Component };