/
Korablik
/
Developer
Обзор
Документация
Войти
/
Korablik
/
Developer
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
src/components/PaginationControls.tsx
62 строки
1 KB
Korablevsky
fixFinal
26 мар 2024, 20:29
26 мар 2024, 20:29
ef55868
Код
Авторство
О чём код?
import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons' import { useJobItemsContext } from '../lib/hooks' type PaginationButtonProps = { direction: 'previous' | 'next' currentPage: number onClick: () => void } export default function Pagination() { const { currentPage, totalNumberOfPages, handleChangePage: onClick, } = useJobItemsContext() return ( <section className='pagination'> {currentPage > 1 && ( <PaginationButton direction='previous' currentPage={currentPage} onClick={() => onClick('previous')} /> )} {currentPage < totalNumberOfPages && ( <PaginationButton direction='next' currentPage={currentPage} onClick={() => onClick('next')} /> )} </section> ) } function PaginationButton({ direction, currentPage, onClick, }: PaginationButtonProps) { return ( <button onClick={e => { onClick() e.currentTarget.blur() }} className={`pagination__button pagination__button--${direction}`} > {direction === 'previous' && ( <> <ArrowLeftIcon /> Page {currentPage - 1} </> )} {direction === 'next' && ( <> Page {currentPage + 1} <ArrowRightIcon /> </> )} </button> ) }