💄 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
	
	 haraldnilsen
						haraldnilsen