File size: 3,234 Bytes
65d68f5 f3056f5 65d68f5 f3056f5 65d68f5 f3056f5 65d68f5 f3056f5 66680b1 65d68f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | "use client";
import type { TeachLessonNotes } from "@/lib/tuition/teachLessonNotes";
import { PacedTeachMarkdown } from "./PacedTeachMarkdown";
import type { TeachingPace } from "@/lib/api/teaching-preferences";
export function TeachNotesStep({
notes,
beatIndex,
pace = "standard",
}: {
notes: TeachLessonNotes;
beatIndex: number;
pace?: TeachingPace;
}) {
const index = Math.min(
Math.max(beatIndex, 0),
Math.max(notes.sections.length - 1, 0),
);
const section = notes.sections[index];
const showGoals = index === 0;
return (
<section
className="mx-auto max-w-[1080px] bg-[#0B0F0E] px-5 py-6 text-[#F2F4F1] sm:rounded-xl sm:px-9 sm:py-8 lg:px-10"
data-testid="tuition-active-step"
data-step-panel="Teach"
tabIndex={-1}
>
<header className="flex flex-wrap items-start justify-between gap-x-4 gap-y-2">
<p className="font-mono text-[11px] font-semibold uppercase tracking-[0.16em] text-[#F2F4F1]/45">
02 · Teach
</p>
<p className="font-mono text-[11px] font-semibold tabular-nums text-[#F2F4F1]/45">
{String(index + 1).padStart(2, "0")} of{" "}
{String(notes.sections.length).padStart(2, "0")}
</p>
</header>
<p className="mt-4 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-[#EAD08C]/75">
{notes.method}
</p>
<h2 className="mt-3 max-w-[22ch] text-[28px] font-semibold leading-[1.1] tracking-[-0.04em] text-[#F2F4F1] text-pretty sm:text-[34px]">
{showGoals ? notes.title : section.title}
</h2>
{showGoals ? (
<div className="mt-6 max-w-[46ch]">
<p className="font-mono text-[11px] font-semibold uppercase tracking-[0.14em] text-[#F2F4F1]/45">
Today you will
</p>
<ul className="mt-3 space-y-2">
{notes.goals.map((goal) => (
<li
key={goal}
className="grid grid-cols-[1rem_minmax(0,1fr)] gap-2 text-[15px] leading-6 text-[#F2F4F1]/88"
>
<span className="mt-2 size-1.5 rounded-full bg-[#EAD08C]" />
<span>{goal}</span>
</li>
))}
</ul>
</div>
) : null}
{section ? (
<div className={showGoals ? "mt-10 border-t border-white/10 pt-8" : "mt-6"}>
{showGoals ? (
<p className="font-mono text-[11px] font-semibold uppercase tracking-[0.14em] text-[#F2F4F1]/45">
{section.title}
</p>
) : null}
<PacedTeachMarkdown key={`${section.id}:${pace}`} markdown={section.markdown} pace={pace} />
{section.boardPoints?.length ? (
<div className="mt-6 border-t border-white/10 pt-4">
<p className="font-mono text-[11px] font-semibold uppercase tracking-[0.14em] text-[#F2F4F1]/60">
On the board
</p>
<ul className="mt-3 list-disc space-y-2 pl-5 text-[14px] leading-6 text-[#F2F4F1]/85">
{section.boardPoints.map((point) => <li key={point}>{point}</li>)}
</ul>
</div>
) : null}
</div>
) : null}
</section>
);
}
|