Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | import React from 'react' import styled from 'styled-components' const StyledPager = styled.div` display: flex; flex-direction: row; align-items: center; margin: 10px 0; ` const PagerButton = styled.div` width: 50%; margin: 0; text-align: center; font-size: small; ` interface Props { hasPrev: boolean hasNext: boolean handlePrevClick: Function handleNextClick: Function } export default class Pager extends React.Component<Props> { static defaultProps = { hasPrev: false, hasNext: false, } handleOnPrevClick(e: React.MouseEvent<HTMLAnchorElement>) { e.preventDefault() this.props.handlePrevClick() } handleOnNextClick(e: React.MouseEvent<HTMLAnchorElement>) { e.preventDefault() this.props.handleNextClick() } render() { const { hasPrev, hasNext } = this.props return ( <StyledPager> {hasPrev && ( <PagerButton> <a onClick={this.handleOnPrevClick.bind(this)}>Prev</a> </PagerButton> )} {hasNext && ( <PagerButton> <a onClick={this.handleOnNextClick.bind(this)}>Next</a> </PagerButton> )} </StyledPager> ) } } |