style pagination controls

This commit is contained in:
Edward Shen 2020-11-27 14:19:33 -05:00
parent 2d7fdae813
commit c2a99f61c7
Signed by: edward
GPG key ID: F350507060ED6C90
3 changed files with 18 additions and 10 deletions

View file

@ -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";

View file

@ -1,4 +1,12 @@
.note-title {
display: flex;
justify-content: space-between;
}
}
.prev-page-link {
margin-right: 10px;
}
.next-page-link {
margin-left: 10px;
}

View file

@ -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}>&lt;&lt;</a>;
prevPageLink = <a href={rootPath} className={style.prevPageLink}>&lt;&lt;</a>;
} else if (currentPage !== 1) {
backElement = <a href={rootPath + '/' + (currentPage - 1)}>&lt;&lt;</a>;
prevPageLink = <a href={rootPath + '/' + (currentPage - 1)} className={style.prevPageLink}>&lt;&lt;</a>;
}
return (
@ -31,11 +31,11 @@ export default ({ data, pageContext }) => {
</article>
)
})}
<div>
{backElement}
<p>{currentPage}</p>
{currentPage !== numPages ? <a href={rootPath + '/' + (currentPage + 1)}>&gt;&gt;</a> : ''}
</div>
<p className={style.paginationNav}>
{prevPageLink}
{currentPage}
{currentPage !== numPages && <a href={rootPath + '/' + (currentPage + 1)} className={style.nextPageLink}>&gt;&gt;</a>}
</p>
</>
)
}