💄 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 <PaginationButton
pageNumber={page} pageNumber={page}
handlePageChange={handlePageChange} handlePageChange={handlePageChange}
isCurrentPage={page === currentPage}
/> />
</q.div> </q.div>
))} ))}

View file

@ -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>