Add multi-tag selection support to tag-picker without client side JS
This commit is contained in:
@@ -39,7 +39,7 @@ export function Home({ searchParams }: { searchParams: URLSearchParams }) {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Pagination currentPage={currentPage} totalPages={totalPages} />
|
||||
<Pagination searchParams={searchParams} currentPage={currentPage} totalPages={totalPages} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -85,7 +85,7 @@ function PostCard({ post }: { post: Post }) {
|
||||
);
|
||||
}
|
||||
|
||||
function Pagination({ currentPage, totalPages }: { currentPage: number; totalPages: number }) {
|
||||
function Pagination({ currentPage, totalPages, searchParams }:{ currentPage: number; totalPages: number, searchParams: URLSearchParams }) {
|
||||
// Calculate the range of page numbers to show
|
||||
let startPage: number;
|
||||
let endPage: number;
|
||||
@@ -113,11 +113,17 @@ function Pagination({ currentPage, totalPages }: { currentPage: number; totalPag
|
||||
|
||||
const pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
|
||||
|
||||
let passThroughParams = ''
|
||||
searchParams.forEach((val, key) => {
|
||||
if(key != 'page')
|
||||
passThroughParams += `&${key}=${val}`
|
||||
})
|
||||
|
||||
return (
|
||||
<nav className="pagination">
|
||||
{/* Previous button - always visible, disabled on first page */}
|
||||
<a
|
||||
href={`/?page=${currentPage - 1}`}
|
||||
href={`/?page=${currentPage - 1}${passThroughParams}`}
|
||||
className={`pagination-link ${currentPage === 1 ? 'disabled' : ''}`}
|
||||
style={{
|
||||
opacity: currentPage === 1 ? 0.5 : 1,
|
||||
@@ -132,7 +138,7 @@ function Pagination({ currentPage, totalPages }: { currentPage: number; totalPag
|
||||
{pages.map((page) => (
|
||||
<a
|
||||
key={page}
|
||||
href={`/?page=${page}`}
|
||||
href={`/?page=${page}${passThroughParams}`}
|
||||
className={`pagination-link ${page === currentPage ? 'active' : ''}`}
|
||||
>
|
||||
{page}
|
||||
@@ -141,7 +147,7 @@ function Pagination({ currentPage, totalPages }: { currentPage: number; totalPag
|
||||
|
||||
{/* Next button - always visible, disabled on last page */}
|
||||
<a
|
||||
href={`/?page=${currentPage + 1}`}
|
||||
href={`/?page=${currentPage + 1}${passThroughParams}`}
|
||||
className={`pagination-link ${currentPage === totalPages ? 'disabled' : ''}`}
|
||||
style={{
|
||||
opacity: currentPage === totalPages ? 0.5 : 1,
|
||||
|
||||
Reference in New Issue
Block a user