implementing seach + pagination + docs

This commit is contained in:
Michi 2025-04-20 16:04:06 +02:00
parent 00c39d3416
commit 364f73b06a
4 changed files with 171 additions and 6 deletions

View file

@ -4,17 +4,27 @@ import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';
import Link from 'next/link';
import { generatePagination } from '@/app/lib/utils';
import { usePathname, useSearchParams } from 'next/navigation';
export default function Pagination({ totalPages }: { totalPages: number }) {
const pathname = usePathname();
const searchParams = useSearchParams();
const currentPage = Number(searchParams.get('page')) || 1;
const createPageURL = (pageNumber: number | string) => {
const params = new URLSearchParams(searchParams);
params.set('page', pageNumber.toString());
return `${pathname}?${params.toString()}`;
};
// NOTE: Uncomment this code in Chapter 11
// const allPages = generatePagination(currentPage, totalPages);
const allPages = generatePagination(currentPage, totalPages);
return (
<>
{/* NOTE: Uncomment this code in Chapter 11 */}
{/* <div className="inline-flex">
<div className="inline-flex">
<PaginationArrow
direction="left"
href={createPageURL(currentPage - 1)}
@ -47,7 +57,7 @@ export default function Pagination({ totalPages }: { totalPages: number }) {
href={createPageURL(currentPage + 1)}
isDisabled={currentPage >= totalPages}
/>
</div> */}
</div>
</>
);
}