APPENDIX D

Chapter Nav

Next before previous; chapters wrap.

HANDLE: chapter-nav
LIVES IN: src/components/Editorial.jsx (ChapterNav)
USED ON: Foot of every chapter
PROPS: prev · next (projects)

EXAMPLE

LIVE

As it renders.

CODE

COPY AND PASTE

How it is called.

JSX

import { ChapterNav } from '../components/Editorial.jsx'
import { getNeighbors } from '../data/projects.js'

const { prev, next } = getNeighbors(slug)
<ChapterNav prev={prev} next={next} />

RULES

What must stay true.

Next before previous; chapters wrap.

EXAMPLESCHAPTER NAV

CODE

JSX

import { ChapterNav } from '../components/Editorial.jsx'
import { getNeighbors } from '../data/projects.js'

const { prev, next } = getNeighbors(slug)
<ChapterNav prev={prev} next={next} />