| "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> |
| ); |
| } |
|
|
