@arolariu/components
Version:
🎨 60+ 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! ⚡
90 lines (89 loc) • 2.96 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import "react";
import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
import { cn } from "../../lib/utils.js";
import { buttonVariants } from "./button.js";
function Pagination({ className, ...props }) {
return /*#__PURE__*/ jsx("nav", {
role: "navigation",
"aria-label": "pagination",
"data-slot": "pagination",
className: cn("mx-auto flex w-full justify-center", className),
...props
});
}
function PaginationContent({ className, ...props }) {
return /*#__PURE__*/ jsx("ul", {
"data-slot": "pagination-content",
className: cn("flex flex-row items-center gap-1", className),
...props
});
}
function PaginationItem({ ...props }) {
return /*#__PURE__*/ jsx("li", {
"data-slot": "pagination-item",
...props
});
}
function PaginationLink({ className, isActive, size = "icon", ...props }) {
return /*#__PURE__*/ jsx("a", {
"aria-current": isActive ? "page" : void 0,
"data-slot": "pagination-link",
"data-active": isActive,
className: cn(buttonVariants({
variant: isActive ? "outline" : "ghost",
size
}), className),
...props
});
}
function PaginationPrevious({ className, ...props }) {
return /*#__PURE__*/ jsxs(PaginationLink, {
"aria-label": "Go to previous page",
size: "default",
className: cn("gap-1 px-2.5 sm:pl-2.5", className),
...props,
children: [
/*#__PURE__*/ jsx(ChevronLeftIcon, {}),
/*#__PURE__*/ jsx("span", {
className: "hidden sm:block",
children: "Previous"
})
]
});
}
function PaginationNext({ className, ...props }) {
return /*#__PURE__*/ jsxs(PaginationLink, {
"aria-label": "Go to next page",
size: "default",
className: cn("gap-1 px-2.5 sm:pr-2.5", className),
...props,
children: [
/*#__PURE__*/ jsx("span", {
className: "hidden sm:block",
children: "Next"
}),
/*#__PURE__*/ jsx(ChevronRightIcon, {})
]
});
}
function PaginationEllipsis({ className, ...props }) {
return /*#__PURE__*/ jsxs("span", {
"aria-hidden": true,
"data-slot": "pagination-ellipsis",
className: cn("flex size-9 items-center justify-center", className),
...props,
children: [
/*#__PURE__*/ jsx(MoreHorizontalIcon, {
className: "size-4"
}),
/*#__PURE__*/ jsx("span", {
className: "sr-only",
children: "More pages"
})
]
});
}
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
//# sourceMappingURL=pagination.js.map