nmemmertandClaude Sonnet 5.5
5ab416930b
A button beside Aa in the reader's top bar opens a Compare translations sheet (pick the Bible to compare with, show/hide the differing-word highlights). It shows as active while a comparison is on. The controls moved out of the Aa sheet; "C" opens it from the keyboard. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
60 lines
2.7 KiB
React
60 lines
2.7 KiB
React
// "Aa" sheet: text size, typeface, spacing, theme, how verses are laid out, and a second Bible
|
|
// to read beside the first.
|
|
import Sheet from './Sheet.jsx';
|
|
import { READER_THEMES } from './readerThemes.js';
|
|
|
|
const SIZES = [['S', 0.875], ['M', 1], ['L', 1.125], ['XL', 1.25], ['XXL', 1.5]];
|
|
|
|
function Segmented({ options, value, onChange, label }) {
|
|
return (
|
|
<div role="group" aria-label={label} className="flex overflow-hidden rounded-xl border border-[var(--r-line)]">
|
|
{options.map(([id, text]) => (
|
|
<button key={String(id)} type="button" onClick={() => onChange(id)} aria-pressed={value === id}
|
|
className={`flex-1 px-3 py-2 text-sm ${value === id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'}`}>
|
|
{text}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function SettingsSheet({
|
|
open, onClose, fontSize, onFontSize, theme, onTheme, layout, onLayout, wide, onWide,
|
|
font, onFont, spacing, onSpacing, verseNumbers, onVerseNumbers,
|
|
}) {
|
|
const row = 'mb-4';
|
|
const label = 'mb-1.5 block text-xs text-[var(--r-sub)]';
|
|
return (
|
|
<Sheet open={open} onClose={onClose} title="Reading settings">
|
|
<div className={row}>
|
|
<span className={label}>Text size</span>
|
|
<Segmented label="Text size" options={SIZES.map(([l, s]) => [s, l])} value={fontSize} onChange={onFontSize} />
|
|
</div>
|
|
<div className={row}>
|
|
<span className={label}>Typeface</span>
|
|
<Segmented label="Typeface" options={[['serif', 'Serif'], ['sans', 'Sans'], ['easy', 'Easy to read']]} value={font} onChange={onFont} />
|
|
</div>
|
|
<div className={row}>
|
|
<span className={label}>Line spacing</span>
|
|
<Segmented label="Line spacing" options={[['snug', 'Snug'], ['normal', 'Normal'], ['airy', 'Airy']]} value={spacing} onChange={onSpacing} />
|
|
</div>
|
|
<div className={row}>
|
|
<span className={label}>Theme</span>
|
|
<Segmented label="Theme" options={Object.entries(READER_THEMES).map(([id, t]) => [id, t.label])} value={theme} onChange={onTheme} />
|
|
</div>
|
|
<div className={row}>
|
|
<span className={label}>Verses</span>
|
|
<Segmented label="Verse layout" options={[['flow', 'Flowing'], ['verses', 'One per line']]} value={layout} onChange={onLayout} />
|
|
</div>
|
|
<div className={row}>
|
|
<span className={label}>Verse numbers</span>
|
|
<Segmented label="Verse numbers" options={[[true, 'Show'], [false, 'Hide']]} value={verseNumbers} onChange={onVerseNumbers} />
|
|
</div>
|
|
<div className={row}>
|
|
<span className={label}>Width</span>
|
|
<Segmented label="Reading width" options={[[false, 'Column'], [true, 'Two columns']]} value={wide} onChange={onWide} />
|
|
</div>
|
|
</Sheet>
|
|
);
|
|
}
|