app/components/post-series-nav.tsx

Functions

Imports

It imports app/lib/series-path.mjs. Imported by app/routes/blog.$slug.tsx.

Source

1import { Link } from "react-router";
2
3import { seriesPath } from "~/lib/series-path.mjs";
4
5import type { Route } from "../routes/+types/blog.$slug";
6
7type LoadedPost = Route.ComponentProps["loaderData"]["post"];
8
9/** The series this post is a part of: every part, with this one marked, then the parts either side. */
10export function SeriesNav({
11  post,
12  series,
13  seriesParts,
14}: {
15  post: LoadedPost;
16  /** `post.series`, narrowed: the caller renders this only for a post in a series. */
17  series: string;
18  seriesParts: Route.ComponentProps["loaderData"]["seriesParts"];
19}) {
20  const partIndex = seriesParts.findIndex((entry) => entry.slug === post.slug);
21  const seriesPrevious = partIndex > 0 ? seriesParts[partIndex - 1] : undefined;
22  const seriesNext =
23    partIndex >= 0 && partIndex < seriesParts.length - 1
24      ? seriesParts[partIndex + 1]
25      : undefined;
26
27  return (
28    <nav className="post-series" aria-labelledby="series-heading">
29      <h2 id="series-heading">
30        Part {post.part} of {seriesParts.length}:{" "}
31        <Link to={seriesPath(series)}>{series}</Link>
32      </h2>
33      <ol>
34        {seriesParts.map((entry) => (
35          <li key={entry.slug} aria-current={entry.slug === post.slug ? "true" : undefined}>
36            {entry.slug === post.slug ? (
37              <span>{entry.title}</span>
38            ) : (
39              <Link to={`/writing/${entry.slug}`}>{entry.title}</Link>
40            )}
41          </li>
42        ))}
43      </ol>
44      {(seriesPrevious || seriesNext) && (
45        <div className="post-series-steps">
46          {seriesPrevious && (
47            <Link className="post-nav-target" to={`/writing/${seriesPrevious.slug}`}>
48              <span className="post-nav-label">Previous part</span>
49              <span className="post-nav-title">{seriesPrevious.title}</span>
50            </Link>
51          )}
52          {seriesNext && (
53            <Link className="post-nav-target" to={`/writing/${seriesNext.slug}`}>
54              <span className="post-nav-label">Next part</span>
55              <span className="post-nav-title">{seriesNext.title}</span>
56            </Link>
57          )}
58        </div>
59      )}
60    </nav>
61  );
62}