Something went wrong. Try again.
Original-language reader for Kant, Aristotle & more: select any passage to gloss, translate, or hear it read aloud, with exact citations.
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374import { ChevronLeft, ChevronRight } from "lucide-react"import type { JSX } from "react"import { Link } from "react-router-dom"
import type { WorkSiblings } from "@/lib/corpus"
/** * Work-level navigation (§2), at the foot of a reading page: a previous / next * pager plus the full contents of the work — so every page (notably a front-matter * Vorbemerkung) links to every other. Rendered only for multi-part works; the * sibling order comes from the catalog (reading order, front matter first). */export function WorkNav({ siblings, work, currentId,}: { siblings: WorkSiblings work: string currentId: string}): JSX.Element | null { if (siblings.list.length < 2) return null
return ( <nav className="worknav" aria-label={`${work} navigation`}> <div className="worknav-pager"> {siblings.prev ? ( <Link to={`/read/${siblings.prev.id}`} className="worknav-step worknav-prev"> <ChevronLeft className="size-4" aria-hidden="true" /> <span className="worknav-step-text"> <span className="worknav-dir">Previous</span> <span className="worknav-step-title">{siblings.prev.title}</span> </span> </Link> ) : ( <span className="worknav-step is-empty" aria-hidden="true" /> )} {siblings.next ? ( <Link to={`/read/${siblings.next.id}`} className="worknav-step worknav-next"> <span className="worknav-step-text"> <span className="worknav-dir">Next</span> <span className="worknav-step-title">{siblings.next.title}</span> </span> <ChevronRight className="size-4" aria-hidden="true" /> </Link> ) : ( <span className="worknav-step is-empty" aria-hidden="true" /> )} </div>
<div className="worknav-contents"> <p className="worknav-contents-head">{work}</p> <ol className="worknav-list"> {siblings.list.map((t, i) => ( <li key={t.id}> {t.id === currentId ? ( <span className="worknav-item is-current" aria-current="page"> <span className="worknav-num">{i + 1}</span> <span className="worknav-item-title">{t.title}</span> </span> ) : ( <Link to={`/read/${t.id}`} className="worknav-item"> <span className="worknav-num">{i + 1}</span> <span className="worknav-item-title">{t.title}</span> </Link> )} </li> ))} </ol> </div> </nav> )}