💄 added background when selected page in pagination
Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
parent
10c955372a
commit
4427c2efc0
2 changed files with 8 additions and 1 deletions
|
@ -64,6 +64,7 @@ const Pagination: React.FC<PaginationProps> = ({
|
|||
<PaginationButton
|
||||
pageNumber={page}
|
||||
handlePageChange={handlePageChange}
|
||||
isCurrentPage={page === currentPage}
|
||||
/>
|
||||
</q.div>
|
||||
))}
|
||||
|
|
|
@ -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>
|
||||
|
|
Reference in a new issue