From 81f6be6a00ac654b7233b26e8303578a403301cc Mon Sep 17 00:00:00 2001
From: Mats Bosson <mats.bosson@gmail.com>
Date: Mon, 30 Mar 2026 04:09:18 +0700
Subject: [PATCH] Fix showcase Pagination

---
 packages/showcase/src/sections/navigation.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/showcase/src/sections/navigation.tsx b/packages/showcase/src/sections/navigation.tsx
index 53870e4..c57981e 100644
--- a/packages/showcase/src/sections/navigation.tsx
+++ b/packages/showcase/src/sections/navigation.tsx
@@ -107,7 +107,18 @@ function PaginationDemo() {
   const content = (
     <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.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>
   );