@snapdragonsnursery/react-components 1.1.21 → 1.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/ChildSearchPage.jsx +89 -87
  3. package/src/components/ui/pagination.jsx +14 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@snapdragonsnursery/react-components",
3
- "version": "1.1.21",
3
+ "version": "1.1.23",
4
4
  "description": "",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
package/src/ChildSearchPage.jsx CHANGED
@@ -426,7 +426,7 @@ const ChildSearchPage = ({
426
426
 
427
427
  return (
428
428
  <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
429
- <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
429
+ <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
430
430
  {/* Header */}
431
431
  <div className="mb-8">
432
432
  <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
@@ -739,106 +739,108 @@ const ChildSearchPage = ({
739
739
 
740
740
  {/* Pagination */}
741
741
  {(pagination.totalCount > 0 || children.length > 0) && (
742
- <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
742
+ <div className="px-6 py-6 border-t border-gray-200 dark:border-gray-700">
743
743
  {/* Pagination Info */}
744
744
  <div className="flex items-center justify-between mb-4">
745
745
  <div className="text-sm text-gray-600 dark:text-gray-400">
746
746
  Page {pagination.page} of {pagination.totalPages || 1}
747
747
  </div>
748
748
  <div className="text-sm text-gray-600 dark:text-gray-400">
749
- {actualTotalCount} total children
749
+ {pagination.totalCount || children.length} total children
750
750
  </div>
751
751
  </div>
752
752
 
753
753
  {/* Pagination Controls */}
754
754
  {(pagination.totalPages > 1 || children.length > 0) && (
755
- <Pagination>
756
- <PaginationContent>
757
- <PaginationItem>
758
- <PaginationPrevious
759
- href="#"
760
- onClick={(e) => {
761
- e.preventDefault();
762
- if (pagination.hasPreviousPage) {
763
- handlePageChange(pagination.page - 1);
764
- }
765
- }}
766
- className={cn(
767
- !pagination.hasPreviousPage &&
768
- "pointer-events-none opacity-50"
769
- )}
770
- />
771
- </PaginationItem>
772
-
773
- {/* Page numbers */}
774
- {Array.from(
775
- { length: Math.max(pagination.totalPages, 1) },
776
- (_, i) => i + 1
777
- )
778
- .filter((page) => {
779
- const current = pagination.page;
780
- const total = Math.max(pagination.totalPages, 1);
781
- return (
782
- page === 1 ||
783
- page === total ||
784
- (page >= current - 1 && page <= current + 1)
785
- );
786
- })
787
- .map((page, index, array) => {
788
- if (index > 0 && array[index - 1] !== page - 1) {
755
+ <div className="flex justify-center">
756
+ <Pagination>
757
+ <PaginationContent>
758
+ <PaginationItem>
759
+ <PaginationPrevious
760
+ href="#"
761
+ onClick={(e) => {
762
+ e.preventDefault();
763
+ if (pagination.hasPreviousPage) {
764
+ handlePageChange(pagination.page - 1);
765
+ }
766
+ }}
767
+ className={cn(
768
+ !pagination.hasPreviousPage &&
769
+ "pointer-events-none opacity-50"
770
+ )}
771
+ />
772
+ </PaginationItem>
773
+
774
+ {/* Page numbers */}
775
+ {Array.from(
776
+ { length: Math.max(pagination.totalPages, 1) },
777
+ (_, i) => i + 1
778
+ )
779
+ .filter((page) => {
780
+ const current = pagination.page;
781
+ const total = Math.max(pagination.totalPages, 1);
789
782
  return (
790
- <React.Fragment key={`ellipsis-${page}`}>
791
- <PaginationItem>
792
- <PaginationEllipsis />
793
- </PaginationItem>
794
- <PaginationItem>
795
- <PaginationLink
796
- href="#"
797
- onClick={(e) => {
798
- e.preventDefault();
799
- handlePageChange(page);
800
- }}
801
- isActive={page === pagination.page}
802
- >
803
- {page}
804
- </PaginationLink>
805
- </PaginationItem>
806
- </React.Fragment>
783
+ page === 1 ||
784
+ page === total ||
785
+ (page >= current - 1 && page <= current + 1)
807
786
  );
808
- }
809
- return (
810
- <PaginationItem key={page}>
811
- <PaginationLink
812
- href="#"
813
- onClick={(e) => {
814
- e.preventDefault();
815
- handlePageChange(page);
816
- }}
817
- isActive={page === pagination.page}
818
- >
819
- {page}
820
- </PaginationLink>
821
- </PaginationItem>
822
- );
823
- })}
824
-
825
- <PaginationItem>
826
- <PaginationNext
827
- href="#"
828
- onClick={(e) => {
829
- e.preventDefault();
830
- if (pagination.hasNextPage) {
831
- handlePageChange(pagination.page + 1);
787
+ })
788
+ .map((page, index, array) => {
789
+ if (index > 0 && array[index - 1] !== page - 1) {
790
+ return (
791
+ <React.Fragment key={`ellipsis-${page}`}>
792
+ <PaginationItem>
793
+ <PaginationEllipsis />
794
+ </PaginationItem>
795
+ <PaginationItem>
796
+ <PaginationLink
797
+ href="#"
798
+ onClick={(e) => {
799
+ e.preventDefault();
800
+ handlePageChange(page);
801
+ }}
802
+ isActive={page === pagination.page}
803
+ >
804
+ {page}
805
+ </PaginationLink>
806
+ </PaginationItem>
807
+ </React.Fragment>
808
+ );
832
809
  }
833
- }}
834
- className={cn(
835
- !pagination.hasNextPage &&
836
- "pointer-events-none opacity-50"
837
- )}
838
- />
839
- </PaginationItem>
840
- </PaginationContent>
841
- </Pagination>
810
+ return (
811
+ <PaginationItem key={page}>
812
+ <PaginationLink
813
+ href="#"
814
+ onClick={(e) => {
815
+ e.preventDefault();
816
+ handlePageChange(page);
817
+ }}
818
+ isActive={page === pagination.page}
819
+ >
820
+ {page}
821
+ </PaginationLink>
822
+ </PaginationItem>
823
+ );
824
+ })}
825
+
826
+ <PaginationItem>
827
+ <PaginationNext
828
+ href="#"
829
+ onClick={(e) => {
830
+ e.preventDefault();
831
+ if (pagination.hasNextPage) {
832
+ handlePageChange(pagination.page + 1);
833
+ }
834
+ }}
835
+ className={cn(
836
+ !pagination.hasNextPage &&
837
+ "pointer-events-none opacity-50"
838
+ )}
839
+ />
840
+ </PaginationItem>
841
+ </PaginationContent>
842
+ </Pagination>
843
+ </div>
842
844
  )}
843
845
  </div>
844
846
  )}
package/src/components/ui/pagination.jsx CHANGED
@@ -2,10 +2,11 @@
2
2
  // Provides consistent pagination styling for tables
3
3
 
4
4
  import * as React from "react";
5
- import { cn } from "../../lib/utils";
6
- import { Button } from "./button";
7
5
  import { ChevronLeftIcon, ChevronRightIcon, EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
8
6
 
7
+ import { cn } from "../../lib/utils";
8
+ import { buttonVariants } from "./button";
9
+
9
10
  const Pagination = ({ className, ...props }) => (
10
11
  <nav
11
12
  role="navigation"
@@ -32,14 +33,13 @@ PaginationItem.displayName = "PaginationItem";
32
33
 
33
34
  const PaginationLink = React.forwardRef(
34
35
  ({ className, isActive, size = "icon", ...props }, ref) => (
35
- <Button
36
+ <a
36
37
  aria-current={isActive ? "page" : undefined}
37
- variant={isActive ? "default" : "outline"}
38
- size={size}
39
- ref={ref}
40
38
  className={cn(
41
- "h-9 w-9 p-0",
42
- isActive && "bg-primary text-primary-foreground hover:bg-primary/90",
39
+ buttonVariants({
40
+ variant: isActive ? "outline" : "ghost",
41
+ size,
42
+ }),
43
43
  className
44
44
  )}
45
45
  {...props}
@@ -51,13 +51,12 @@ PaginationLink.displayName = "PaginationLink";
51
51
  const PaginationPrevious = React.forwardRef(({ className, ...props }, ref) => (
52
52
  <PaginationLink
53
53
  aria-label="Go to previous page"
54
- size="icon"
55
- ref={ref}
56
- className={cn("gap-1", className)}
54
+ size="default"
55
+ className={cn("gap-1 pl-2.5", className)}
57
56
  {...props}
58
57
  >
59
58
  <ChevronLeftIcon className="h-4 w-4" />
60
- <span className="sr-only">Previous</span>
59
+ <span>Previous</span>
61
60
  </PaginationLink>
62
61
  ));
63
62
  PaginationPrevious.displayName = "PaginationPrevious";
@@ -65,13 +64,12 @@ PaginationPrevious.displayName = "PaginationPrevious";
65
64
  const PaginationNext = React.forwardRef(({ className, ...props }, ref) => (
66
65
  <PaginationLink
67
66
  aria-label="Go to next page"
68
- size="icon"
69
- ref={ref}
70
- className={cn("gap-1", className)}
67
+ size="default"
68
+ className={cn("gap-1 pr-2.5", className)}
71
69
  {...props}
72
70
  >
71
+ <span>Next</span>
73
72
  <ChevronRightIcon className="h-4 w-4" />
74
- <span className="sr-only">Next</span>
75
73
  </PaginationLink>
76
74
  ));
77
75
  PaginationNext.displayName = "PaginationNext";