mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-22 18:00:06 +01:00
pagination component
This commit is contained in:
parent
6f7ec405e4
commit
04f1b2bd9a
29
src/components/molecules/Pagination.jsx
Normal file
29
src/components/molecules/Pagination.jsx
Normal 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}>
|
||||
« Newer Posts
|
||||
</Link>
|
||||
) : null}
|
||||
{nextPagePath ? (
|
||||
<Link className={styles.paginationLink} to={nextPagePath}>
|
||||
Older Posts »
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Pagination.propTypes = {
|
||||
pageContext: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
export default Pagination
|
16
src/components/molecules/Pagination.module.scss
Normal file
16
src/components/molecules/Pagination.module.scss
Normal 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;
|
||||
}
|
||||
}
|
@ -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 = {
|
||||
|
Loading…
Reference in New Issue
Block a user