2020-05-22 14:38:19 +02:00
|
|
|
import React, { ReactElement } from 'react'
|
2019-11-11 01:00:26 +01:00
|
|
|
import { Link } from 'gatsby'
|
2019-12-14 15:46:43 +01:00
|
|
|
import Icon from '../../atoms/Icon'
|
2022-11-11 03:31:54 +01:00
|
|
|
import * as styles from './PrevNext.module.css'
|
2019-11-11 01:00:26 +01:00
|
|
|
|
|
|
|
interface Node {
|
|
|
|
title: string
|
|
|
|
slug: string
|
|
|
|
}
|
|
|
|
|
|
|
|
interface PrevNextProps {
|
|
|
|
prev: Node
|
|
|
|
next: Node
|
|
|
|
}
|
|
|
|
|
2020-05-22 14:38:19 +02:00
|
|
|
const PrevNext = ({ prev, next }: PrevNextProps): ReactElement => (
|
2022-11-11 03:31:54 +01:00
|
|
|
<nav className={styles.prevnext}>
|
2019-11-11 01:00:26 +01:00
|
|
|
<div>
|
|
|
|
{prev && (
|
|
|
|
<Link to={prev.slug}>
|
2019-11-15 22:10:53 +01:00
|
|
|
<Icon name="ChevronLeft" />
|
2022-11-11 03:31:54 +01:00
|
|
|
<p className={styles.label}>Newer</p>
|
|
|
|
<h3 className={styles.title}>{prev.title}</h3>
|
2019-11-11 01:00:26 +01:00
|
|
|
</Link>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
{next && (
|
|
|
|
<Link to={next.slug}>
|
2022-11-11 03:31:54 +01:00
|
|
|
<p className={styles.label}>Older</p>
|
|
|
|
<h3 className={styles.title}>{next.title}</h3>
|
2019-11-15 22:10:53 +01:00
|
|
|
<Icon name="ChevronRight" />
|
2019-11-11 01:00:26 +01:00
|
|
|
</Link>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
)
|
|
|
|
|
|
|
|
export default PrevNext
|