React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

CoursePreview

Course table of contents preview component showing modules and lessons with drip content indicators

Interactive Preview

View the component with sample course data

How to Convince Your Cat You're the Boss
Advanced Procrastination Techniques
Debugging Your Life Choices
+ 5 More

Examples

Different course preview scenarios

Full Course (8 modules, shows first 3 + count)

How to Convince Your Cat You're the Boss
Advanced Procrastination Techniques
Debugging Your Life Choices
+ 5 More

Short Course (2 modules, shows all)

Turn It Off and On Again
Google-Fu for Developers

Empty Course (no modules)

API Reference

Props

product

object - Course data with toc (table of contents) array containing module information

preview

boolean - Preview mode flag (default: false)

username

string - Username (optional, currently unused)

isDemo

boolean - Demo mode flag (optional, currently unused)

primaryColor

string - Primary color (optional, currently unused)

className

string - Additional CSS classes (optional)

Usage Notes

Module Display

The component displays up to 3 modules from the course table of contents. If there are more than 3 modules, it shows a "+ X more" indicator with a lock icon.

Drip Content

Modules can be marked with a drip flag. Non-drip modules show a play icon, while drip modules show a number (currently hardcoded as "7").

Data Structure

The component expects a product object with the following structure:

{
  course: {
    toc: [
      { title: "Module Title", drip: false },
      // ... more modules
    ]
  }
}

Internationalization

The "+ X more" text uses the translation key shared.more for internationalization support.