@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
82 lines (81 loc) • 3.11 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
import { forwardRef } from "react";
import { buttonVariants } from "./button.js";
import { cn } from "../../lib/utilities.js";
const Pagination = ({ className, ...props })=>/*#__PURE__*/ jsx("nav", {
role: "navigation",
"aria-label": "pagination",
className: cn("mx-auto flex w-full justify-center", className),
...props
});
Pagination.displayName = "Pagination";
const PaginationContent = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("ul", {
ref: ref,
className: cn("flex flex-row items-center gap-1", className),
...props
}));
PaginationContent.displayName = "PaginationContent";
const PaginationItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("li", {
ref: ref,
className: cn("", className),
...props
}));
PaginationItem.displayName = "PaginationItem";
const PaginationLink = ({ className, isActive, size = "icon", ...props })=>/*#__PURE__*/ jsx("a", {
"aria-current": isActive ? "page" : void 0,
className: cn(buttonVariants({
variant: isActive ? "outline" : "ghost",
size
}), className),
...props
});
PaginationLink.displayName = "PaginationLink";
const PaginationPrevious = ({ className, ...props })=>/*#__PURE__*/ jsxs(PaginationLink, {
"aria-label": "Go to previous page",
size: "default",
className: cn("gap-1 pl-2.5", className),
...props,
children: [
/*#__PURE__*/ jsx(ChevronLeft, {
className: "h-4 w-4"
}),
/*#__PURE__*/ jsx("span", {
children: "Previous"
})
]
});
PaginationPrevious.displayName = "PaginationPrevious";
const PaginationNext = ({ className, ...props })=>/*#__PURE__*/ jsxs(PaginationLink, {
"aria-label": "Go to next page",
size: "default",
className: cn("gap-1 pr-2.5", className),
...props,
children: [
/*#__PURE__*/ jsx("span", {
children: "Next"
}),
/*#__PURE__*/ jsx(ChevronRight, {
className: "h-4 w-4"
})
]
});
PaginationNext.displayName = "PaginationNext";
const PaginationEllipsis = ({ className, ...props })=>/*#__PURE__*/ jsxs("span", {
"aria-hidden": true,
className: cn("flex h-9 w-9 items-center justify-center", className),
...props,
children: [
/*#__PURE__*/ jsx(MoreHorizontal, {
className: "h-4 w-4"
}),
/*#__PURE__*/ jsx("span", {
className: "sr-only",
children: "More pages"
})
]
});
PaginationEllipsis.displayName = "PaginationEllipsis";
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
//# sourceMappingURL=pagination.js.map