Course Detail Page
Full course detail layout
Overview
A compound component for building an LMS-style course detail page. The sidebar renders modules with accordion sections; each lesson has a status icon. The content area holds the lesson header, body content blocks, and prev/next navigation.
Usage
import { CourseDetailPage } from '@leanicon/web-builder-library'Default
Full layout with sidebar, progress bar, text lesson, and navigation.
Module 1: Getting Started
Your First Component
In this lesson, you will learn how to create your first React component. We will cover JSX syntax, component structure, and how to render components in the browser.
What is a Component?
A component is a reusable piece of UI that encapsulates its own structure, styling, and behavior.
With image content block
Module 1: Getting Started
Setting Up Your Environment
With quiz content block
Module 1: Getting Started
Quiz Lesson
Lifecycle Quiz
All lessons completed
Progress bar at 100%, completed status badge.
Module 2: Advanced
Final Assessment
Congratulations! You have completed all lessons in this course.
Locked lessons
Most lessons locked — only the first is accessible.
Module 1: Getting Started
Welcome
Welcome to the course! Complete this lesson to unlock the next ones.
Lesson header only (no module name)
Your First Component
Lesson header — completed status
Module 1: Getting Started
Welcome to the Course
Dark mode
Module 1: Getting Started
Your First Component
In this lesson, you will learn how to create your first React component.
Sub-components
Sub-component | Description |
|---|---|
| Progress bar showing completed/total lessons |
| Accordion sidebar with modules and lesson status icons |
| Main content wrapper (flex-1) |
| Title, module name, duration badge, and status badge |
| Prose-styled content area |
| Renders text (HTML), image, video, or quiz blocks |
| Previous/next lesson navigation |
Key Types
CourseModule: { id, title, lessons: Lesson[] }
Lesson: { id, title, duration?, status: LessonStatus, contentBlocks?: ContentBlock[] }
LessonStatus: "completed" | "in-progress" | "not-started" | "locked"
ContentBlock: TextBlock | ImageBlock | VideoBlock | QuizBlock
LessonNavTarget: { id, title, href? }
Notes
CourseDetailPage.Sidebarhas a mobile-responsive collapsible toggle on small screens.CourseDetailPage.ContentBlockrenders text (viadangerouslySetInnerHTML), image with optional caption, video with controls, or quiz with default read-only rendering.- Pass
childrentoContentBlock(quiz type) to override the default quiz display with a custom interactive form. - Navigation links use
hreffor anchor links oronNavigatefor SPA-style callbacks. - Dark mode: pass
colorScheme="dark"to the root or place inside a.darkancestor.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
colorScheme | enum | — | No | |
className | string | — | No | |
modules | CourseModule[] | — | Yes | |
activeLessonId | string | — | No | |
onLessonClick | ((lessonId: string) => void) | — | No | |
title | string | — | Yes | |
module | string | — | No | |
duration | string | — | No | |
status | enum | — | No | |
headingLevel | enum | h1 | No | h1 when the layout IS the page surface (default); h2 when embedded under a page h1 (spec 007 D7). |
block | ContentBlock | — | Yes | |
previous | LessonNavTarget | — | No | |
next | LessonNavTarget | — | No | |
onNavigate | ((lessonId: string) => void) | — | No |