import * as React from 'react' ; import { LinkProps } from '../../utils/createLink' ; import generatePages from './generatePages' ; import Page from './Page' ; import styles from './Pagination.styles' ; interface PaginationProps { page : number ; totalPages : number ; Link : React . ComponentType < LinkProps > ; linkProps ? : { [ key ] : any ; } ; } const maxVisiblePages = 7 ; const Pagination = ( { page , totalPages , Link , linkProps , } ) => { const pages = generatePages ( totalPages , page , maxVisiblePages ) ; return ( < div className = { styles . pagination } > { pages . map ( ( currentPage , index ) => { const isSkipBackward = totalPages > 3 && index === 1 && pages [ 1 ] !== pages [ 2 ] - 1 ; const isSkipForward = totalPages > 3 && index === maxVisiblePages - 2 && pages [ maxVisiblePages - 2 ] !== pages [ maxVisiblePages - 3 ] + 1 ; return ( < Link key = { currentPage } page = { currentPage } { ... linkProps } > { pageProps => ( < Page page = { currentPage } skipBackward = { isSkipBackward } skipForward = { isSkipForward } { ... pageProps } />)} < /Link>); } ) } < /div>); } ; export default Pagination ;