💄 added background when selected page in pagination

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
haraldnilsen 2023-09-05 13:16:24 +02:00
parent 10c955372a
commit 4427c2efc0
2 changed files with 8 additions and 1 deletions

View file

@ -64,6 +64,7 @@ const Pagination: React.FC<PaginationProps> = ({
<PaginationButton
pageNumber={page}
handlePageChange={handlePageChange}
isCurrentPage={page === currentPage}
/>
</q.div>
))}

View file

@ -2,17 +2,23 @@ import q from 'qjuul'
interface PaginationButtonProps {
pageNumber: number
isCurrentPage?: boolean
handlePageChange: (pageNumber: number) => void
}
const PaginationButton: React.FC<PaginationButtonProps> = ({
pageNumber,
handlePageChange,
isCurrentPage,
}) => {
return (
<q.div
onClick={() => handlePageChange(pageNumber)}
className="bg-red-400 p-2 rounded-md hover:cursor-pointer"
className={
isCurrentPage
? 'bg-red-600 p-2 rounded-md hover:cursor-pointer'
: 'bg-red-400 p-2 rounded-md hover:cursor-pointer'
}
>
<p>{pageNumber}</p>
</q.div>