react-static
Version:
A progressive static site generator for React
60 lines (53 loc) • 1.44 kB
JavaScript
import React from 'react'
import { useRouteData, Head } from 'react-static'
import { Link } from '@reach/router'
//
let styled
if (process.env.STYLE_SYSTEM === 'emotion') {
styled = require('react-emotion').default
} else if (process.env.STYLE_SYSTEM === 'styled') {
styled = require('styled-components').default
}
const PaginationLink = styled
? styled(({ isCurrent, ...rest }) => <Link {...rest} />)`
display: inline-block;
border: 1px solid rgba(0, 0, 0, 0.1);
margin: 0 0.5rem 0.5rem 0;
padding: 0.2rem 0.3rem;
opacity: ${props => (props.isCurrent ? 0.5 : 1)};
`
: Link
export default () => {
const { posts, currentPage, totalPages } = useRouteData()
return (
<div>
<Head>
<title>Blog | React Static</title>
</Head>
<h1>It's blog time.</h1>
<ul>
{posts.map(post => (
<li key={post.id}>
<Link to={`/blog/post/${post.id}/`}>{post.title}</Link>
</li>
))}
</ul>
<h5>Pages</h5>
<div>
{Array.from(new Array(totalPages), (d, i) => i).map(page => {
page += 1
return (
<span key={page}>
<PaginationLink
to={`/blog/page/${page}`}
isCurrent={page === currentPage}
>
{page}
</PaginationLink>
</span>
)
})}
</div>
</div>
)
}