Components
Compact course rows
Present a known course in management and selection lists with a smaller cover and optional selection/removal actions.
On this page
Purpose and usage
Present a known course in management and selection lists with a smaller cover and optional selection/removal actions.
Anatomy
| Part | Contract |
|---|---|
| Checkbox | Only when onSelect exists |
| Thumbnail/title | Linked course destination |
| Remove | Optional parent callback |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| Identity | id, title, thumbnailUrl |
| Selection | checked and onSelect |
| Removal | onRemove supplied by owner container |
State coverage
| State | Implemented behavior |
|---|---|
| Navigation only | No selection or removal callback |
| Selectable | Native checkbox with controlled checked state |
| Removable | Parent receives removal intent |
Interaction and composition
- Keep selection distinct from opening the course.
- The container owns whether removal changes a relationship or deletes anything.
- Use native image proportions and preserve readable titles.
Accessibility and readiness
The checkbox needs a name in its composition. Verify icon-only removal naming and clarify consequences. A pictured removal control does not prove deletion or enrollment changes.
Composition example
<CourseListItem id={course.id} title={course.title}
thumbnailUrl={course.thumbnail} checked={selected}
onSelect={setSelected} />Source references
| File | Responsibility |
|---|---|
| src/components/CourseListItem.tsx | Selection, course link and removal |
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1