Staaarter

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.

By Staaarter Team
Education
Docs
Live preview

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.json

Prefer 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

PropTypeDefaultDescription
badge{ label: string; variant?: BadgeVariant }nonePill above the lesson title; only rendered when badge is truthy.
lessonTitleReactNodenoneTop-level lesson title.
metastringundefinedSmall metadata line under the title, e.g. "Module 2 · 8 min read".
blocksLessonBlock[]noneOrdered content blocks rendered in sequence.
classNamestringnoneExtra 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.