Course home
A React block (a whole screen) in Beamline's Education app.
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).
- Authoring the lessons and their release (course-builder).
- Grading submissions (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<unknown>) | — | 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<string, ProjectState> | — | |
onSaveDraft | ((projectId: string, text: string) => void | Promise<unknown>) | — | |
onSubmitProject | ((projectId: string, work: { text: string; shared: boolean; }) => void | Promise<unknown>) | — | |
onRequestReview | ((request: { projectId: string; questionId: string; explanation: string; }) => void | P… | — | |
reflections | Record<string, ReflectionState> | — | |
onPostReflection | ((reflectionId: string, text: string) => void | Promise<unknown>) | — | 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<unknown>) | — | |
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<unknown>) | — | 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<HTMLDivElement> | — | Receives the documented native target or imperative handle; omitted by default. |
Built from
- sheet
- dialog
- textarea
- switch
- rating
- collapsible
- comment-thread
- popover
- search-field
- avatar
- badge
- button
- alert
- empty-state
Dependencies
lucide-react
Import
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 · Connect your agent
More in Education
- 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: 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: 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: 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: 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: 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: 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: 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…