app/components/post-head-blocks.tsx

Functions

Imports

It imports no other module of this repo. Imported by app/routes/blog.$slug.tsx.

Source

1// None of these may name a person: the missing byline is deliberate (a hidden `p-author` h-card
2// carries it). No `p-` or `dt-` classes either, so a status like "draft" never reaches parsers as data.
3
4const STATUS_LABEL = {
5  notes: "Notes",
6  draft: "Draft",
7  "in progress": "In progress",
8  finished: "Finished",
9  obsolete: "Obsolete",
10} as const;
11
12export type WritingStatus = keyof typeof STATUS_LABEL;
13
14export function PostHeadBlocks({
15  writingStatus,
16  assumedAudience,
17  keyTakeaways,
18}: {
19  writingStatus: WritingStatus | null;
20  assumedAudience: string | null;
21  keyTakeaways: string[] | null;
22}) {
23  const takeaways = keyTakeaways ?? [];
24  if (!writingStatus && !assumedAudience && takeaways.length === 0) return null;
25
26  return (
27    <dl className="post-blocks">
28      {writingStatus ? (
29        <div className="post-block">
30          <dt>Writing status</dt>
31          <dd>{STATUS_LABEL[writingStatus]}</dd>
32        </div>
33      ) : null}
34
35      {assumedAudience ? (
36        <div className="post-block">
37          <dt>Assumed audience</dt>
38          <dd>{assumedAudience}</dd>
39        </div>
40      ) : null}
41
42      {takeaways.length > 0 ? (
43        <div className="post-block">
44          <dt>Key takeaways</dt>
45          <dd>
46            <ul>
47              {takeaways.map((item) => (
48                <li key={item}>{item}</li>
49              ))}
50            </ul>
51          </dd>
52        </div>
53      ) : null}
54    </dl>
55  );
56}