@snapdragonsnursery/react-components 1.1.18 → 1.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.1.18",
+  "version": "1.1.20",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/ChildSearchPage.jsx

@@ -420,8 +420,9 @@ const ChildSearchPage = ({
   };
 
   // Calculate pagination display values
-  const startItem = pagination.totalCount > 0 ? (pagination.page - 1) * pagination.pageSize + 1 : 0;
-  const endItem = Math.min(pagination.page * pagination.pageSize, pagination.totalCount);
+  const actualTotalCount = pagination.totalCount || children.length;
+  const startItem = actualTotalCount > 0 ? (pagination.page - 1) * pagination.pageSize + 1 : 0;
+  const endItem = Math.min(pagination.page * pagination.pageSize, actualTotalCount);
 
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
@@ -668,7 +669,7 @@ const ChildSearchPage = ({
                 <div className="flex items-center justify-between">
                   <div className="text-sm text-gray-600 dark:text-gray-400">
                     {(pagination.totalCount > 0 || children.length > 0)
-                      ? `Showing ${startItem} to ${endItem} of ${pagination.totalCount || children.length} children`
+                      ? `Showing ${startItem} to ${endItem} of ${actualTotalCount} children`
                       : "No children found"}
                   </div>
                 </div>
@@ -745,7 +746,7 @@ const ChildSearchPage = ({
                       Page {pagination.page} of {pagination.totalPages || 1}
                     </div>
                     <div className="text-sm text-gray-600 dark:text-gray-400">
-                      {pagination.totalCount || children.length} total children
+                      {actualTotalCount} total children
                     </div>
                   </div>
                   
@@ -754,8 +755,14 @@ const ChildSearchPage = ({
                     <Pagination>
                       <PaginationContent>
                         <PaginationItem>
-                          <PaginationPrevious
-                            onClick={() => handlePageChange(pagination.page - 1)}
+                          <PaginationPrevious 
+                            href="#"
+                            onClick={(e) => {
+                              e.preventDefault();
+                              if (pagination.hasPreviousPage) {
+                                handlePageChange(pagination.page - 1);
+                              }
+                            }}
                             className={cn(
                               !pagination.hasPreviousPage &&
                                 "pointer-events-none opacity-50"
@@ -786,7 +793,11 @@ const ChildSearchPage = ({
                                   </PaginationItem>
                                   <PaginationItem>
                                     <PaginationLink
-                                      onClick={() => handlePageChange(page)}
+                                      href="#"
+                                      onClick={(e) => {
+                                        e.preventDefault();
+                                        handlePageChange(page);
+                                      }}
                                       isActive={page === pagination.page}
                                     >
                                       {page}
@@ -798,7 +809,11 @@ const ChildSearchPage = ({
                             return (
                               <PaginationItem key={page}>
                                 <PaginationLink
-                                  onClick={() => handlePageChange(page)}
+                                  href="#"
+                                  onClick={(e) => {
+                                    e.preventDefault();
+                                    handlePageChange(page);
+                                  }}
                                   isActive={page === pagination.page}
                                 >
                                   {page}
@@ -808,8 +823,14 @@ const ChildSearchPage = ({
                           })}
 
                         <PaginationItem>
-                          <PaginationNext
-                            onClick={() => handlePageChange(pagination.page + 1)}
+                          <PaginationNext 
+                            href="#"
+                            onClick={(e) => {
+                              e.preventDefault();
+                              if (pagination.hasNextPage) {
+                                handlePageChange(pagination.page + 1);
+                              }
+                            }}
                             className={cn(
                               !pagination.hasNextPage &&
                                 "pointer-events-none opacity-50"

package/src/components/ui/pagination.jsx

@@ -34,10 +34,14 @@ const PaginationLink = React.forwardRef(
   ({ className, isActive, size = "icon", ...props }, ref) => (
     <Button
       aria-current={isActive ? "page" : undefined}
-      variant={isActive ? "outline" : "ghost"}
+      variant={isActive ? "default" : "outline"}
       size={size}
       ref={ref}
-      className={cn("cursor-pointer", className)}
+      className={cn(
+        "h-9 w-9 p-0",
+        isActive && "bg-primary text-primary-foreground hover:bg-primary/90",
+        className
+      )}
       {...props}
     />
   )