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