nmemmertandClaude Sonnet 5.5
b1bc1c8ea4
Build and Push Docker Image / build-and-push (push) Failing after 19s
Reader: plan strip with a dot per chapter, plan sheet (day picker, chapter ticks, translation, streak, other plans), end-of-day card that steps through the day and rolls into the next, and chapter-level auto-marking. Each plan remembers its own translation (BSB, ESV, NLT, CSB, NASB, NET) and the Reader follows it while a plan is open. Plans home redesigned in the reader's themes with a Continue card, in-progress plans, a filterable catalog, and sheets for details and the custom-plan builder. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
40 lines
2.3 KiB
React
40 lines
2.3 KiB
React
// Thin strip under the top bar while reading a plan: which plan and day, one dot
|
||
// per chapter of today's reading (filled = read, ringed = the chapter on screen),
|
||
// and the translation. Tapping it opens the plan sheet. When you've wandered off
|
||
// today's chapters (e.g. following a cross-reference) it offers a way back.
|
||
export default function PlanStrip({ info, translation, inPlan, notice, onOpen, onJoin, onDot, onBackToDay }) {
|
||
if (!info && !notice) return null;
|
||
return (
|
||
<div className="mx-auto flex max-w-2xl flex-col gap-1 px-3 pt-2 font-sans">
|
||
{notice && <p className="rounded-lg bg-[var(--r-bar)] px-3 py-1.5 text-xs text-[var(--r-accent)]">{notice}</p>}
|
||
{info && (
|
||
<div className="rounded-xl bg-[var(--r-bar)] px-3 py-2 text-xs text-[var(--r-sub)]">
|
||
<button type="button" onClick={inPlan ? onOpen : onJoin} className="flex w-full items-center justify-between gap-3 text-left">
|
||
<span className="truncate font-medium text-[var(--r-text)]">{info.plan.title} · Day {info.dayIndex + 1}</span>
|
||
<span className="shrink-0">{inPlan ? translation : 'Open plan'}</span>
|
||
</button>
|
||
{inPlan && info.position === 0 && (
|
||
<button type="button" onClick={onBackToDay} className="mt-1.5 rounded-full border border-[var(--r-line)] px-3 py-1 text-[11px] text-[var(--r-accent)] hover:bg-black/5">
|
||
Back to today’s reading
|
||
</button>
|
||
)}
|
||
{inPlan && info.position > 0 && (
|
||
<div className="mt-1.5 flex items-center gap-1.5">
|
||
{info.refs.map((r, i) => {
|
||
const key = `${r.book}.${r.chapter}`;
|
||
const read = info.readSet.has(key);
|
||
const current = i + 1 === info.position;
|
||
return (
|
||
<button key={key} type="button" onClick={() => onDot(r)} aria-label={`Go to chapter ${r.chapter}`}
|
||
className={`h-2.5 w-2.5 rounded-full border-[1.5px] ${read ? 'border-[var(--r-accent)] bg-[var(--r-accent)]' : 'border-[var(--r-sub)]'} ${current ? 'ring-2 ring-[var(--r-line)]' : ''}`} />
|
||
);
|
||
})}
|
||
<span className="ml-auto">{info.done ? 'Day read' : `${info.position} of ${info.total}`}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|