ENGLISH·COURSE API
    Preparing search index...

    Function

    LessonCloseCard

    • The end-of-lesson block: the "Mark as complete" action and the next lesson as one closing surface.

      Parameters

      • course: {
            course: {
                id: string & $brand<"CourseId">;
                slug: string & $brand<"Slug">;
                title: string;
                description: string;
                language: string;
                lessonCount: number;
                moduleCount: number;
                sequence: number;
                track: "level" | "reference";
                outcomes?: string[];
                audience?: string;
                highlights?: string[];
                sounds?: { vowels: string[]; consonants: string[] };
                translations?: Record<
                    string,
                    {
                        description?: string;
                        outcomes?: string[];
                        audience?: string;
                        highlights?: string[];
                    },
                >;
            };
            nextLesson: | {
                kind: "reading";
                id: string & $brand<"LessonId">;
                courseId: string & $brand<"CourseId">;
                moduleId: string & $brand<"ModuleId">;
                sequence: number;
                title: string;
                body: string;
            }
            | {
                kind: "video";
                id: string & $brand<"LessonId">;
                courseId: string & $brand<"CourseId">;
                moduleId: string & $brand<"ModuleId">;
                sequence: number;
                title: string;
                description: string;
                source: string;
                durationSeconds: number;
                poster?: string;
                uploadDate?: string;
            }
            | null;
            nextLessonModule: | {
                id: string & $brand<"ModuleId">;
                courseId: string & $brand<"CourseId">;
                slug: string & $brand<"Slug">;
                title: string;
                sequence: number;
            }
            | null;
            children: ReactNode;
        }

        The course the lesson belongs to, for the link's route

      Returns Element

      Finishing a lesson and starting the next one are one moment for the learner, so they share one surface: the card sits at the end of the center column, right after the lesson's own content, and offers the next lesson as a control-sized target instead of a line of text in the rail.

      The card is the page's only next-lesson affordance and renders the same at every width. It began as a phone-only block — the desktop collapsed it to a bare button and pointed at a rail card instead — until the learner asked for the same closing surface everywhere; the rail card went with the collapse, so the next lesson is still offered exactly once.

      Up next is a different question from "continue": it is simply the lesson after this one in the course, whatever the learner has watched. Where to continue — which may skip finished videos — is answered only by findContinueTarget, used by the course overview, the module overview and My learning.

      The completion control arrives as children rather than being rendered here, so this component stays presentational — it knows nothing of the Server Action, the lesson id or the progress store, and nothing of whether the lesson is complete. The control owns that state and the copy that changes with it; the card owns the surface and the next lesson.

    Settings

    Member Visibility