Pagination
Pagination with page navigation, next and previous links.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/pagination.tsx
export function Pagination(o) {
const pages = Array.from({ length: o.total }, (_, i) => \`<li><a href="#" class="\${i + 1 === o.page ? "border" : ""} h-9 w-9 inline-flex items-center justify-center rounded-md text-sm">\${i + 1}</a></li>\`).join("");
return \`<nav class="mx-auto flex w-full justify-center"><ul class="flex items-center gap-1"><li><a href="#" class="px-2.5 h-9 inline-flex items-center">Previous</a></li>\${pages}<li><a href="#" class="px-2.5 h-9 inline-flex items-center">Next</a></li></ul></nav>\`;
}
Installation
$ bext ui add pagination
Copy and paste the following into src/components/ui/pagination.tsx.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/pagination.tsx
export function Pagination(o) {
const pages = Array.from({ length: o.total }, (_, i) => \`<li><a href="#" class="\${i + 1 === o.page ? "border" : ""} h-9 w-9 inline-flex items-center justify-center rounded-md text-sm">\${i + 1}</a></li>\`).join("");
return \`<nav class="mx-auto flex w-full justify-center"><ul class="flex items-center gap-1"><li><a href="#" class="px-2.5 h-9 inline-flex items-center">Previous</a></li>\${pages}<li><a href="#" class="px-2.5 h-9 inline-flex items-center">Next</a></li></ul></nav>\`;
}
On This Page