Lesson Content Reader
Rich-text lesson reader that composes a section heading, paragraphs, an ordered or unordered list, a pull-quote, and a bordered monospace code snippet from a typed array of content-block objects.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/lesson-content-reader.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/education/education14.tsx instead.
Usage
The file also exports education14Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Education14, education14Demo } from "@/components/blocks/education/education14"; export default function Page() { return <Education14 {...education14Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| badge | { label: string; variant?: BadgeVariant } | none | Pill above the lesson title; only rendered when badge is truthy. |
| lessonTitle | ReactNode | none | Top-level lesson title. |
| meta | string | undefined | Small metadata line under the title, e.g. "Module 2 · 8 min read". |
| blocks | LessonBlock[] | none | Ordered content blocks rendered in sequence. |
| className | string | none | Extra classes for the outer section element. |
Types
type LessonBlock = | { type: "heading"; text: string } | { type: "paragraph"; text: string } | { type: "list"; style: "ordered" | "unordered"; items: string[] } | { type: "quote"; text: string; attribution?: string } | { type: "code"; code: string; language?: string };
Behavior notes
- There is no markdown parser and no client state: `blocks` is rendered with a plain switch-on-`type` map over a fixed, caller-supplied array.
- The code block is a real <pre><code> element for correct whitespace/wrapping, styled with a border and monospace font; there's no syntax highlighting.
- The `language` field on a code block only controls the small label header above the snippet, it doesn't drive any actual highlighting logic.
- Every block type is purely presentational; nothing in this component is clickable or interactive.
More Education Blocks
View all →academy-course-cards
Academy Course Cards
Academy section with an eyebrow, a two-column heading, and three course cards that float a lesson checklist above a category label, title, and lesson count.
institutional-quick-facts
Institutional Quick Facts
Quick facts grid displaying key institutional statistics with a large value, label, and short description per tile.
global-partnerships-grid
Global Partnerships Grid
Global partnerships section showcasing partner institutions with location details and yearly exchange statistics.
mission-and-vision-statement
Mission and Vision Statement
Side-by-side mission and vision text blocks with an inspirational leadership quote below.
social-media-links-grid
Social Media Links Grid
Social media connection section with platform cards showing handle and follower count.
education-social-proof
Education Social Proof
Social proof section pairing key stats (rating, enrollment, completion rate) with a featured student testimonial.