nmemmertandClaude Sonnet 5.5
31abee0695
Build and Push Docker Image / build-and-push (push) Successful in 4m15s
Studies now move through a stage bar in the reader's themes. Outline splits chunks by clicking between verses (join merges notes) and suggests chunks from section headings. Study is three panes: outline, passage with an Observe / Interpret / Apply accordion, and commentary / word study / cross-refs / people & places for the chunk; original words are added by clicking them in the interlinear. Script drafts an outline from notes; Export holds files and the share link. Home, Import and the Pronunciation guide are restyled. Study projects are BSB only. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
47 lines
2.9 KiB
React
47 lines
2.9 KiB
React
// The chunk's passage, set like the Reader. Click a verse number to open its
|
|
// interlinear words; click an original word to add it to the chunk's word study.
|
|
import { useState } from 'react';
|
|
import { NT_BOOK_NUMBER } from '../../utils/bibleUtils.jsx';
|
|
|
|
export default function ScripturePane({ verses, chapter, interlinear, interlinearLoading, addedStrongs, onPickWord }) {
|
|
const [openVerse, setOpenVerse] = useState(null);
|
|
const isHebrew = chapter && !NT_BOOK_NUMBER[chapter.bookAbbrev];
|
|
return (
|
|
<section aria-label="Scripture" className="rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] px-5 py-4">
|
|
<div className="font-serif text-[1.05rem] leading-[1.85]">
|
|
{verses.map((v) => {
|
|
const words = v.chapter === chapter?.chapter ? interlinear?.[String(v.number)] : null;
|
|
const open = openVerse === `${v.chapter}:${v.number}`;
|
|
return (
|
|
<div key={`${v.chapter}-${v.number}`} className="mb-1.5">
|
|
<button type="button" disabled={!words} onClick={() => setOpenVerse(open ? null : `${v.chapter}:${v.number}`)}
|
|
title={words ? 'Show original words' : undefined}
|
|
className={`mr-1.5 align-super font-sans text-[0.6em] ${words ? 'text-[var(--r-accent)] hover:underline' : 'cursor-default text-[var(--r-sub)]'} ${open ? 'font-bold' : ''}`}>
|
|
{v.chapter !== chapter?.chapter ? `${v.chapter}:` : ''}{v.number}
|
|
</button>
|
|
<span>{v.text}</span>
|
|
{open && words && (
|
|
<div dir={isHebrew ? 'rtl' : 'ltr'} className="mt-2 flex flex-wrap gap-2 rounded-xl bg-[var(--r-bg)] p-2.5 font-sans">
|
|
{words.map((w, i) => {
|
|
const added = w.s && addedStrongs.has(w.s.toUpperCase());
|
|
return (
|
|
<button key={i} type="button" disabled={!w.s} onClick={() => onPickWord(w)}
|
|
title={[w.t, w.s, w.p].filter(Boolean).join(' · ') + (w.s ? (added ? ' — already in word study' : ' — click to add') : '')}
|
|
className={`flex flex-col items-center rounded-lg border px-2 py-1 text-center ${added ? 'border-[var(--r-accent)]' : 'border-[var(--r-line)] hover:bg-black/5'} disabled:cursor-default`}>
|
|
<span className={`text-base ${isHebrew ? 'font-serif' : ''}`}>{w.o}</span>
|
|
<span className="text-[11px] leading-tight text-[var(--r-sub)]">{w.g || '—'}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
{interlinearLoading && <p className="mt-2 font-sans text-xs text-[var(--r-sub)]">Loading original words…</p>}
|
|
{!interlinearLoading && interlinear && <p className="mt-2 font-sans text-[11px] text-[var(--r-sub)]">Click a verse number to see its original words; click a word to study it.</p>}
|
|
</section>
|
|
);
|
|
}
|