1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-22 18:00:06 +01:00

pagination component

This commit is contained in:
Matthias Kretschmann 2018-09-06 20:27:18 +02:00
parent 6f7ec405e4
commit 04f1b2bd9a
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 52 additions and 8 deletions

View File

@ -0,0 +1,29 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'gatsby'
import styles from './Pagination.module.scss'
const Pagination = ({ pageContext }) => {
const { previousPagePath, nextPagePath } = pageContext
return (
<div className={styles.pagination}>
{previousPagePath ? (
<Link className={styles.paginationLink} to={previousPagePath}>
&laquo; Newer Posts
</Link>
) : null}
{nextPagePath ? (
<Link className={styles.paginationLink} to={nextPagePath}>
Older Posts &raquo;
</Link>
) : null}
</div>
)
}
Pagination.propTypes = {
pageContext: PropTypes.object.isRequired
}
export default Pagination

View File

@ -0,0 +1,16 @@
@import 'variables';
.pagination {
display: flex;
margin-top: $spacer * 2;
margin-bottom: $spacer * 2;
}
.paginationLink {
flex: 1 1 50%;
display: block;
&:last-child {
text-align: right;
}
}

View File

@ -8,12 +8,12 @@ import PostLead from '../components/atoms/PostLead'
import PostContent from '../components/atoms/PostContent'
import PostMore from '../components/atoms/PostMore'
import PostLinkActions from '../components/atoms/PostLinkActions'
import Pagination from '../components/molecules/Pagination'
import postStyles from '../templates/Post.module.scss'
import styles from './Posts.module.scss'
const IndexPage = ({ data, location, pageContext }) => {
const edges = data.allMarkdownRemark.edges
const { previousPagePath, nextPagePath } = pageContext
const Posts = edges.map(({ node }) => {
const { type, linkurl, title, image } = node.frontmatter
@ -41,17 +41,16 @@ const IndexPage = ({ data, location, pageContext }) => {
<PostLinkActions slug={slug} linkurl={linkurl} />
</Fragment>
)}
<div>
{previousPagePath ? (
<Link to={previousPagePath}>Previous</Link>
) : null}
{nextPagePath ? <Link to={nextPagePath}>Next</Link> : null}
</div>
</article>
)
})
return <Layout location={location}>{Posts}</Layout>
return (
<Layout location={location}>
{Posts}
<Pagination pageContext={pageContext} />
</Layout>
)
}
IndexPage.propTypes = {