# Course home A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Education](https://beamline.io/components/apps/education) app. Live demo: https://beamline.io/components/course-home A learner's course, week by week, in the cohort's time zone: each lesson done or not, a project's draft or submission, a reflection answered or not, a live session upcoming, live now with Join, with a recording to watch, a recording not ready yet or not recorded, and a week not open yet with the day it opens. An item opens in a reader beside its week: opening a lesson never completes it (Mark complete does, and a refusal says why); a project's draft is saved apart from submitting, sharing with the cohort is its own choice, and a graded question offers Request a review (the explanation previewed, a refused send keeping the words, then In review and the outcome); a reflection opens in a sheet saying who will see the answer, which joins the cohort's only once the app confirms it, each peer answer opening into its thread; end-of-course feedback goes in steps with each answer's audience beside it, and a staff preview saves nothing. Beside the weeks: pinned items reordered and removed from a menu (a pin to something removed stays until unpinned, a refused save keeps the order shown) and the cohort's ranking with its basis and period, ties said and your row one chip away. A session live now leads the page with Join. Your place is a figure (with places moved); the ranking shows the top three and the rows around you, never a scrolled box. ## Use it for - The learner's home of a cohort or self-paced course: what is open this week, what is done, what is due, what is live now. - Onboarding or training programmes where people read lessons, hand in work and discuss it with their group. ## Not for - The staff's view of a course ([course-dashboard](https://beamline.io/components/course-dashboard)). - Authoring the lessons and their release ([course-builder](https://beamline.io/components/course-builder)). - Grading submissions ([grading-desk](https://beamline.io/components/grading-desk)). ## Anatomy - aside: the course and cohort, Your pins (a strip of pinned items; Edit pins opens a menu with search, Move up, Move down and Unpin per pin), Your place (basis and period, a ranked list with ties written =4, your row marked, a You: rank chip that brings it into view) - weeks: the time zone line, then one card per week: title (a lock and Opens date when not open), lessons done of total, rows per item with its kind icon, title, kind and its state in words; a live session's Join and a recording's Watch - reader: All weeks, week and kind, title; a lesson's text with Mark complete (Completed once recorded) and Next; a lesson that can't be shown says so; the week's other items beside it on a wide screen - project: the brief and due date; the work field with Draft saved or Not saved yet, Share with the cohort with what it means, Save draft and Submit project; submitted: when, private or shared, the work, and the grade by question with Request a review, In review or the outcome - review request (dialog): the question and its marks, the policy, the explanation or its preview, Cancel, Preview or Edit, Send request - reflection (sheet): the prompt, who will see the answer, the answer field and Post answer, or the posted answer; the cohort's answers, each opening into its replies - feedback: a preview notice when staff look, the steps, the step's questions each with its audience, Back, Next, Send feedback ## States - portal not open - released week - locked week - lesson not done - lesson complete - completing - complete refused - content unavailable - event upcoming - event live - recording available - recording pending - not recorded - project brief open - draft unsaved - draft saving - draft saved - draft refused - sharing with the cohort on or off - submitting - submit refused - submitted private - submitted shared - not graded - graded - review: offered, closed, preview, sending, refused, in review, resolved kept, resolved changed - reflection: prompt, draft, posting, refused, posted, peer answers, thread open, no answers yet - feedback: public, team, instructor steps, preview, sending, refused, sent - pins: none, ordered, saving, refused, unavailable pin - ranking: ranked, tied, unranked, no ranking, unavailable ## Keyboard - Tab through the aside, then each week's rows (a locked week's rows are disabled) - a row: Enter opens it; All weeks goes back - Edit pins: Enter opens the menu; search then Tab to a result and Enter to pin; Move up, Move down and Unpin are buttons per pin - You: rank moves focus to your row - the review dialog and the reflection sheet trap focus; Escape closes them ## Motion Sheets and dialogs on the motion tokens; nothing moves at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `course` (required) | `{ title: string; cohort: string; timezone: string; cohortSize: number; }` | — | | | `weeks` (required) | `CourseWeek[]` | — | | | `me` (required) | `{ id: string; name: string; }` | — | The signed-in learner. | | `now` | `number` | — | "Now" for releases, live sessions and deadlines (ms). Default: the browser's clock. | | `opensAt` | `number \| null` | — | The course opens on this day (ms): before it, the home says when. | | `completed` (required) | `string[]` | — | Lessons the learner completed (ids). Opening a lesson never completes it. | | `onComplete` | `((lessonId: string) => void \| Promise)` | — | Marks a lesson complete; resolve once recorded (the app adds it to completed), reject with why. | | `openItem` | `string \| null` | — | The item open in the reader; null shows the weeks. | | `defaultOpenItem` | `string \| null` | — | | | `onOpenItemChange` | `((id: string \| null) => void)` | — | | | `onSessionAction` | `((sessionId: string, action: "join" \| "watch") => void)` | — | Joins a live session or plays its recording. | | `projects` | `Record` | — | | | `onSaveDraft` | `((projectId: string, text: string) => void \| Promise)` | — | | | `onSubmitProject` | `((projectId: string, work: { text: string; shared: boolean; }) => void \| Promise)` | — | | | `onRequestReview` | `((request: { projectId: string; questionId: string; explanation: string; }) => void \| P…` | — | | | `reflections` | `Record` | — | | | `onPostReflection` | `((reflectionId: string, text: string) => void \| Promise)` | — | Posts an answer; it reaches the cohort only once this resolves (the app adds it to reflections). | | `feedbackQuestions` | `FeedbackQuestion[]` | — | | | `feedbackPreview` | `boolean` | — | Staff previewing the feedback: nothing is saved or sent, and the flow says so. | | `onSendFeedback` | `((answers: FeedbackAnswer[]) => void \| Promise)` | — | | | `ranking` | `"unavailable" \| Ranking \| null` | — | The cohort's ranking; null when the course has none; "unavailable" when it can't be shown now. | | `pins` | `string[]` | — | Pinned items (ids) in the learner's order; an id no longer in the course stays as unavailable until removed. | | `onPinsChange` | `((pins: string[]) => void \| Promise)` | — | Saves the new order; reject with why to keep it on screen with the reason. | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `style` | `CSSProperties` | — | Inline styles on the documented visual root; no overrides by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - sheet - dialog - textarea - switch - rating - collapsible - [comment-thread](https://beamline.io/components/comment-thread) - popover - [search-field](https://beamline.io/components/search-field) - avatar - badge - button - alert - [empty-state](https://beamline.io/components/empty-state) ## Dependencies `lucide-react` ## Import ```tsx import { CourseHome } from "@beamline/course-home"; ``` ## Get it Course home is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Education - [Course builder](https://beamline.io/components/course-builder): Setting a course up. The learning path as ordered sets, each with its release rule in place (at once, a delay after the set before drawn as a bar you… - [Program modules](https://beamline.io/components/program-modules): A wellness or coaching program's modules as a practitioner builds them. The modules down the side with where each stands (draft, published at a revision… - [Question builder](https://beamline.io/components/question-builder): Questions built beside their material. A reading passage (imported, with an import pending or failed said with Try again, or pasted) whose words become… - [Grading desk](https://beamline.io/components/grading-desk): Grading a quiz or an assignment. The submissions down the side, not graded first, the open one beside its grade. A quiz attempt shows each question's… - [Course dashboard](https://beamline.io/components/course-dashboard): A course's staff view: its identity (draft or published, who may join, how it runs, its lessons) with Publish through your app, Preview as a learner and… - [Volunteer rota](https://beamline.io/components/volunteer-rota): Several plans side by side for the people who staff them: plans as columns, teams and their positions as rows, each cell the people scheduled with their… - [Gift desk](https://beamline.io/components/gift-desk): A gift or tickets taken in person, on a phone at an event or at a desk: the gift entered large in its currency, once or monthly (monthly said as an… - [Gift batches](https://beamline.io/components/gift-batches): Gift batches between counting and the books: batches a counting team enters, each with the day the gifts were received (apart from when they were entered… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).