import { pages, styles } from "../ssr.js"; styles.scope(prevNext).css` :host{ display: grid; grid-template-columns: 1fr 2fr 1fr; margin-top: 1rem; border-top: 1px solid var(--border); } :host [rel=prev]{ grid-column: 1; } :host [rel=next]{ grid-column: 3; text-align: right; } `; import { el } from "../../index.js"; /** * @param {import("../types.d.ts").Info} page * */ export function prevNext(page){ const page_index= pages.indexOf(page); return el("div", { className: prevNext.name }).append( el(pageLink, { rel: "prev", page: pages[page_index-1] }), el(pageLink, { rel: "next", page: pages[page_index+1] }) ); } /** * @param {Object} attrs * @param {"prev"|"next"} attrs.rel * @param {import("../types.d.ts").Info} [attrs.page] * */ function pageLink({ rel, page }){ if(!page) return el(); let { href, title, description }= page; return el("a", { rel, href, title: description }).append( rel==="next" ?"(next) " : "", title, rel==="prev" ? " (previous)" : "", ); }