app/components/dictionary-entry.tsx

Functions

Imports

It imports app/components/enhance.tsx, app/lib/dictionary-entries.mjs. Imported by app/routes/content-page.tsx.

Source

1import { Enhance } from "~/components/enhance";
2import { listenLabel, type DictionaryEntry as Entry } from "~/lib/dictionary-entries.mjs";
3
4import "~/styles/dictionary-entry.css";
5
6/** A speaker with two sound waves; the waves carry the playing state in CSS. */
7function SpeakerIcon() {
8  return (
9    <svg className="term-speaker" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false">
10      <path d="M4 9.5h3.5L12 5.5v13l-4.5-4H4z" fill="currentColor" />
11      <path className="term-wave term-wave-1" d="M15 9.2a4 4 0 0 1 0 5.6" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
12      <path className="term-wave term-wave-2" d="M17.6 6.6a7.6 7.6 0 0 1 0 10.8" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
13    </svg>
14  );
15}
16
17/**
18 * The dictionary entry that opens a named software page. Without script the speaker is a plain link
19 * to the clip, which any browser plays; app/enhance/pronounce.ts swaps it for the button, which plays
20 * in place. Nothing plays until the reader asks: no autoplay, and the clip is not fetched before then.
21 */
22export function DictionaryEntry({ entry }: { entry: Entry }) {
23  const label = listenLabel(entry.term);
24  return (
25    <section className="term-entry" aria-label={`Dictionary entry: ${entry.term}`} data-term-entry>
26      <p className="term-head">
27        <dfn className="term-word">
28          <span className="sr-only">{entry.term.toLowerCase()}</span>
29          <span aria-hidden="true">{entry.syllables}</span>
30        </dfn>
31        <span className="term-pron">
32          <span className="term-ipa">{entry.ipa}</span>
33          <span className="term-respell">{entry.respelling}</span>
34          {/* Inside the pronunciation, so on a narrow screen the speaker wraps with it, never alone. */}
35          <a className="term-listen term-listen-link" href={entry.audio} data-term-audio-link aria-label={label}>
36            <SpeakerIcon />
37          </a>
38          <button
39            type="button"
40            className="term-listen"
41            data-term-listen={entry.audio}
42            aria-label={label}
43            aria-pressed="false"
44            hidden
45          >
46            <SpeakerIcon />
47          </button>
48        </span>
49      </p>
50      <p className="term-pos">
51        <i>{entry.partOfSpeech}</i>
52        {entry.plural ? (
53          <>
54            ; plural{" "}
55            {entry.plural.map((form, i) => (
56              <span key={form}>
57                {i > 0 ? " or " : null}
58                <i>{form}</i>
59              </span>
60            ))}
61          </>
62        ) : null}
63      </p>
64      <ol className="term-senses">
65        {entry.senses.map((sense, i) => {
66          const label = entry.senseLabels[i];
67          return (
68            <li key={sense.slice(0, 24)}>
69              {label ? (
70                <>
71                  <i className="term-label">{label}.</i>{" "}
72                </>
73              ) : null}
74              {sense}
75            </li>
76          );
77        })}
78      </ol>
79      <p className="term-ety">
80        <span className="term-ety-label">Etymology</span>{" "}
81        {entry.etymology.map((part, i) =>
82          typeof part === "string" ? (
83            <span key={i}>{part}</span>
84          ) : (
85            <i key={i} lang={part[0]}>
86              {part[1]}
87            </i>
88          ),
89        )}
90      </p>
91      <Enhance module="pronounce" />
92    </section>
93  );
94}