💄 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
|
<PaginationButton
|
||||||
pageNumber={page}
|
pageNumber={page}
|
||||||
handlePageChange={handlePageChange}
|
handlePageChange={handlePageChange}
|
||||||
|
isCurrentPage={page === currentPage}
|
||||||
/>
|
/>
|
||||||
</q.div>
|
</q.div>
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -2,17 +2,23 @@ import q from 'qjuul'
|
||||||
|
|
||||||
interface PaginationButtonProps {
|
interface PaginationButtonProps {
|
||||||
pageNumber: number
|
pageNumber: number
|
||||||
|
isCurrentPage?: boolean
|
||||||
handlePageChange: (pageNumber: number) => void
|
handlePageChange: (pageNumber: number) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
const PaginationButton: React.FC<PaginationButtonProps> = ({
|
const PaginationButton: React.FC<PaginationButtonProps> = ({
|
||||||
pageNumber,
|
pageNumber,
|
||||||
handlePageChange,
|
handlePageChange,
|
||||||
|
isCurrentPage,
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<q.div
|
<q.div
|
||||||
onClick={() => handlePageChange(pageNumber)}
|
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>
|
<p>{pageNumber}</p>
|
||||||
</q.div>
|
</q.div>
|
||||||
|
|
Reference in a new issue