style pagination controls
This commit is contained in:
parent
2d7fdae813
commit
c2a99f61c7
3 changed files with 18 additions and 10 deletions
|
@ -28,7 +28,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
|
|||
}
|
||||
|
||||
const posts = result.data.allMdx.edges;
|
||||
const postsPerPage = 2;
|
||||
const postsPerPage = 10;
|
||||
const numPages = Math.ceil(posts.length / postsPerPage);
|
||||
const rootPath = "/notes";
|
||||
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
.note-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.prev-page-link {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.next-page-link {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
|
@ -6,12 +6,12 @@ import style from "./notes.module.css";
|
|||
export default ({ data, pageContext }) => {
|
||||
const posts = data.allMdx.edges;
|
||||
const { currentPage, numPages, rootPath } = pageContext;
|
||||
let backElement = null;
|
||||
let prevPageLink = null;
|
||||
|
||||
if (currentPage === 2) {
|
||||
backElement = <a href={rootPath}><<</a>;
|
||||
prevPageLink = <a href={rootPath} className={style.prevPageLink}><<</a>;
|
||||
} else if (currentPage !== 1) {
|
||||
backElement = <a href={rootPath + '/' + (currentPage - 1)}><<</a>;
|
||||
prevPageLink = <a href={rootPath + '/' + (currentPage - 1)} className={style.prevPageLink}><<</a>;
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -31,11 +31,11 @@ export default ({ data, pageContext }) => {
|
|||
</article>
|
||||
)
|
||||
})}
|
||||
<div>
|
||||
{backElement}
|
||||
<p>{currentPage}</p>
|
||||
{currentPage !== numPages ? <a href={rootPath + '/' + (currentPage + 1)}>>></a> : ''}
|
||||
</div>
|
||||
<p className={style.paginationNav}>
|
||||
{prevPageLink}
|
||||
{currentPage}
|
||||
{currentPage !== numPages && <a href={rootPath + '/' + (currentPage + 1)} className={style.nextPageLink}>>></a>}
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue