red letter

src/redtext.tsx

@@ -0,0 +1,19 @@
+import { redLetterSpan, type RedLetterEntry } from './redletter'
+
+export default function RedText({ text, entry }: { text: string; entry: RedLetterEntry | undefined }) {
+  if (entry === null) return <span className="jesus">{text}</span>
+  if (typeof entry === 'string') {
+    const span = redLetterSpan(text, entry)
+    if (span) {
+      const [s, e] = span
+      return (
+        <>
+          {text.slice(0, s)}
+          <span className="jesus">{text.slice(s, e)}</span>
+          {text.slice(e)}
+        </>
+      )
+    }
+  }
+  return <>{text}</>
+}