Components
Lesson editing panel
Let creators organize the video, description, actions and resources of one real lesson within a collapsible unit.
On this page
Purpose and usage
Let creators organize the video, description, actions and resources of one real lesson within a collapsible unit.
Anatomy
| Part | Contract |
|---|---|
| Header | Lesson identity, collapse and delete controls |
| Video | Provider selection and embed field |
| Duration | Hours, minutes and seconds |
| Description | Rich editor |
| Actions/resources | Editable and sortable contextual content |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| data | id, title, embedCode, duration, description, actionItems, links, downloads and error |
| collapsed | Parent-controlled display |
| onChange / onDelete | Parent mutation intent |
| dragListeners / isDragging | Sorting state from container |
State coverage
| State | Implemented behavior |
|---|---|
| Expanded | Complete editing body |
| Collapsed | Compact header |
| Invalid | Parent/source validation feedback |
| Uploading | Separate API reservation/transfer/completion lifecycle |
Interaction and composition
- Keep lesson content sourced from the actual course.
- Preserve duration shape and stable IDs.
- Use the actual form validation before storing embeds and URLs.
- Uploads and provider search are external workflows; local captures do not execute them.
Accessibility and readiness
Audit naming on icon actions, provider dropdowns, rich editing, error association and drag alternatives. This specimen renders the real component; providers, upload permissions and successful transfer are intentionally unverified.
Source references
| File | Responsibility |
|---|---|
| src/components/LessonItem.tsx | Lesson fields, provider selection, actions and resources |
| src/components/VideoSearchBox.tsx | Provider video discovery input |
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