mats.bosson/PettyUI
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix showcase Pagination

Browse Source
This commit is contained in:
Mats Bosson 2026-03-30 04:09:18 +07:00
parent eea201cd12
commit 81f6be6a00
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/showcase/src/sections/navigation.tsx
View File

@ -107,7 +107,18 @@ function PaginationDemo() {
const content = ( const content = (
<Pagination page={page()} totalPages={5} onPageChange={setPage} class="flex items-center gap-1"> <Pagination page={page()} totalPages={5} onPageChange={setPage} class="flex items-center gap-1">
<Pagination.Previous class="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-40">Prev</Pagination.Previous> <Pagination.Previous class="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-40">Prev</Pagination.Previous>
<Pagination.Items class="px-2 py-1 text-sm rounded cursor-pointer hover:bg-indigo-50 data-[current]:bg-indigo-600 data-[current]:text-white" /> <Pagination.Items>
{(item) => (
<button
type="button"
class={`px-2 py-1 text-sm rounded ${item.isActive ? "bg-indigo-600 text-white" : "hover:bg-indigo-50 cursor-pointer"} ${item.type === "ellipsis" ? "cursor-default" : ""}`}
onClick={() => { if (item.page) setPage(item.page); }}
disabled={item.type === "ellipsis"}
>
{item.type === "ellipsis" ? "..." : item.page}
</button>
)}
</Pagination.Items>
<Pagination.Next class="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-40">Next</Pagination.Next> <Pagination.Next class="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-40">Next</Pagination.Next>
</Pagination> </Pagination>
); );