|
1 | 1 | "use client" |
2 | 2 |
|
3 | 3 | import { ChevronLeft, ChevronRight } from "lucide-react" |
| 4 | +import Link from "next/link" |
4 | 5 |
|
5 | 6 | interface PaginationProps { |
6 | 7 | currentPage: number |
7 | 8 | totalPages: number |
8 | 9 | hasNextPage: boolean |
9 | 10 | hasPrevPage: boolean |
10 | | - onPageChange: (page: number) => void |
| 11 | + onPageChange?: (page: number) => void |
11 | 12 | } |
12 | 13 |
|
13 | 14 | export default function Pagination({ |
@@ -38,69 +39,120 @@ export default function Pagination({ |
38 | 39 | return pages |
39 | 40 | } |
40 | 41 |
|
41 | | - const handlePageClick = (page: number) => { |
42 | | - // Always call onPageChange, even if it's the same page (for consistency) |
43 | | - onPageChange(page) |
44 | | - } |
| 42 | + // If onPageChange is provided, use it for client-side navigation |
| 43 | + if (onPageChange) { |
| 44 | + return ( |
| 45 | + <div className="flex items-center justify-center gap-2 mt-12"> |
| 46 | + {/* Previous Button */} |
| 47 | + <button |
| 48 | + onClick={() => onPageChange(currentPage - 1)} |
| 49 | + disabled={!hasPrevPage || currentPage <= 1} |
| 50 | + className={`flex items-center gap-1 px-4 py-2 transition-colors shadow-sm ${ |
| 51 | + hasPrevPage && currentPage > 1 |
| 52 | + ? "bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] hover:text-white cursor-pointer" |
| 53 | + : "bg-gray-100 text-gray-400 cursor-not-allowed" |
| 54 | + }`} |
| 55 | + > |
| 56 | + <ChevronLeft className="w-4 h-4" /> |
| 57 | + Previous |
| 58 | + </button> |
45 | 59 |
|
46 | | - const handlePrevious = () => { |
47 | | - if (hasPrevPage && currentPage > 1) { |
48 | | - onPageChange(currentPage - 1) |
49 | | - } |
50 | | - } |
| 60 | + {/* Page Numbers */} |
| 61 | + <div className="flex items-center gap-1"> |
| 62 | + {getPageNumbers().map((pageNum) => ( |
| 63 | + <button |
| 64 | + key={pageNum} |
| 65 | + onClick={() => onPageChange(pageNum)} |
| 66 | + className={`px-4 py-2 transition-colors ${ |
| 67 | + pageNum === currentPage |
| 68 | + ? "bg-gradient-to-r from-[#228B22] to-[#91A511] text-white shadow-md cursor-default" |
| 69 | + : "bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22]/10 cursor-pointer" |
| 70 | + }`} |
| 71 | + > |
| 72 | + {pageNum} |
| 73 | + </button> |
| 74 | + ))} |
| 75 | + </div> |
51 | 76 |
|
52 | | - const handleNext = () => { |
53 | | - if (hasNextPage && currentPage < totalPages) { |
54 | | - onPageChange(currentPage + 1) |
55 | | - } |
| 77 | + {/* Next Button */} |
| 78 | + <button |
| 79 | + onClick={() => onPageChange(currentPage + 1)} |
| 80 | + disabled={!hasNextPage || currentPage >= totalPages} |
| 81 | + className={`flex items-center gap-1 px-4 py-2 transition-colors shadow-sm ${ |
| 82 | + hasNextPage && currentPage < totalPages |
| 83 | + ? "bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] hover:text-white cursor-pointer" |
| 84 | + : "bg-gray-100 text-gray-400 cursor-not-allowed" |
| 85 | + }`} |
| 86 | + > |
| 87 | + Next |
| 88 | + <ChevronRight className="w-4 h-4" /> |
| 89 | + </button> |
| 90 | + </div> |
| 91 | + ) |
56 | 92 | } |
57 | 93 |
|
| 94 | + // Otherwise, use Link for server-side navigation |
58 | 95 | return ( |
59 | 96 | <div className="flex items-center justify-center gap-2 mt-12"> |
60 | 97 | {/* Previous Button */} |
61 | | - <button |
62 | | - onClick={handlePrevious} |
63 | | - disabled={!hasPrevPage || currentPage <= 1} |
64 | | - className={`flex items-center gap-1 px-4 py-2 transition-colors shadow-sm ${ |
65 | | - hasPrevPage && currentPage > 1 |
66 | | - ? "bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] hover:text-white cursor-pointer" |
67 | | - : "bg-gray-100 text-gray-400 cursor-not-allowed" |
68 | | - }`} |
69 | | - > |
70 | | - <ChevronLeft className="w-4 h-4" /> |
71 | | - Previous |
72 | | - </button> |
| 98 | + {hasPrevPage && currentPage > 1 ? ( |
| 99 | + <Link |
| 100 | + href={`/?page=${currentPage - 1}`} |
| 101 | + className="flex items-center gap-1 px-4 py-2 transition-colors shadow-sm bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] hover:text-white cursor-pointer" |
| 102 | + > |
| 103 | + <ChevronLeft className="w-4 h-4" /> |
| 104 | + Previous |
| 105 | + </Link> |
| 106 | + ) : ( |
| 107 | + <button |
| 108 | + disabled |
| 109 | + className="flex items-center gap-1 px-4 py-2 transition-colors shadow-sm bg-gray-100 text-gray-400 cursor-not-allowed" |
| 110 | + > |
| 111 | + <ChevronLeft className="w-4 h-4" /> |
| 112 | + Previous |
| 113 | + </button> |
| 114 | + )} |
73 | 115 |
|
74 | 116 | {/* Page Numbers */} |
75 | 117 | <div className="flex items-center gap-1"> |
76 | 118 | {getPageNumbers().map((pageNum) => ( |
77 | | - <button |
78 | | - key={pageNum} |
79 | | - onClick={() => handlePageClick(pageNum)} |
80 | | - className={`px-4 py-2 transition-colors ${ |
81 | | - pageNum === currentPage |
82 | | - ? "bg-gradient-to-r from-[#228B22] to-[#91A511] text-white shadow-md cursor-default" |
83 | | - : "bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22]/10 cursor-pointer" |
84 | | - }`} |
85 | | - > |
86 | | - {pageNum} |
87 | | - </button> |
| 119 | + pageNum === currentPage ? ( |
| 120 | + <span |
| 121 | + key={pageNum} |
| 122 | + className="px-4 py-2 bg-gradient-to-r from-[#228B22] to-[#91A511] text-white shadow-md cursor-default" |
| 123 | + > |
| 124 | + {pageNum} |
| 125 | + </span> |
| 126 | + ) : ( |
| 127 | + <Link |
| 128 | + key={pageNum} |
| 129 | + href={`/?page=${pageNum}`} |
| 130 | + className="px-4 py-2 transition-colors bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22]/10 cursor-pointer" |
| 131 | + > |
| 132 | + {pageNum} |
| 133 | + </Link> |
| 134 | + ) |
88 | 135 | ))} |
89 | 136 | </div> |
90 | 137 |
|
91 | 138 | {/* Next Button */} |
92 | | - <button |
93 | | - onClick={handleNext} |
94 | | - disabled={!hasNextPage || currentPage >= totalPages} |
95 | | - className={`flex items-center gap-1 px-4 py-2 transition-colors shadow-sm ${ |
96 | | - hasNextPage && currentPage < totalPages |
97 | | - ? "bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] hover:text-white cursor-pointer" |
98 | | - : "bg-gray-100 text-gray-400 cursor-not-allowed" |
99 | | - }`} |
100 | | - > |
101 | | - Next |
102 | | - <ChevronRight className="w-4 h-4" /> |
103 | | - </button> |
| 139 | + {hasNextPage && currentPage < totalPages ? ( |
| 140 | + <Link |
| 141 | + href={`/?page=${currentPage + 1}`} |
| 142 | + className="flex items-center gap-1 px-4 py-2 transition-colors shadow-sm bg-white border border-[#228B22]/20 text-[#228B22] hover:bg-[#228B22] hover:text-white cursor-pointer" |
| 143 | + > |
| 144 | + Next |
| 145 | + <ChevronRight className="w-4 h-4" /> |
| 146 | + </Link> |
| 147 | + ) : ( |
| 148 | + <button |
| 149 | + disabled |
| 150 | + className="flex items-center gap-1 px-4 py-2 transition-colors shadow-sm bg-gray-100 text-gray-400 cursor-not-allowed" |
| 151 | + > |
| 152 | + Next |
| 153 | + <ChevronRight className="w-4 h-4" /> |
| 154 | + </button> |
| 155 | + )} |
104 | 156 | </div> |
105 | 157 | ) |
106 | 158 | } |
0 commit comments