Course Catalog

Course cards, filters, and detail views

SaaSLMS

Overview

The course catalog domain provides components for browsing, filtering, and viewing course details. CourseCard displays course summaries in a card format with thumbnail, instructor avatars, and enrollment status. CourseFilters provides search, status, level, and category filtering. CourseDetail shows a full course page with modules, instructors, and enrollment actions.

Usage

import { CourseCard, CourseDetail, CourseFilters } from "@leanicon/web-builder-library/saas";

<CourseCard
  course={course}
  onClick={() => router.push(`/courses/${course.id}`)}
  onEnroll={() => enrollInCourse(course.id)}
/>

<CourseFilters
  filters={filters}
  onChange={setFilters}
  categories={categories}
  instructors={instructors}
/>

<CourseDetail
  course={courseData}
  onEnroll={() => enrollInCourse(courseData.id)}
  onContinue={() => resumeCourse(courseData.id)}
/>

Variants

CourseCard - Default

Published

Introduction to React Development

Beginner

Learn React fundamentals including components, hooks, and best practices.

8h8 modules · 42 lessons1,250 enrolled

John Doe

CourseCard - Active Enrollment

Published

Introduction to React Development

Beginner

Learn React fundamentals including components, hooks, and best practices.

8h8 modules · 42 lessons1,250 enrolled

Continue

CourseCard - Completed

Published

Introduction to React Development

Beginner

Learn React fundamentals including components, hooks, and best practices.

8h8 modules · 42 lessons1,250 enrolled

Completed

CourseCard - Dark

Published

Introduction to React Development

Intermediate

Learn React fundamentals including components, hooks, and best practices.

8h8 modules · 42 lessons1,250 enrolled

CourseStatusBadge - All Statuses

DraftUnder ReviewPublishedUnpublishedArchivedRejected

CourseStatusBadge - All Sizes

PublishedPublishedPublished

CourseFilters - Default

CourseFilters - With Categories

CourseDetail (code only)

<CourseDetail
  course={{
    id: "course-1",
    tenantId: "tenant-1",
    title: "Introduction to React Development",
    description: "Learn React fundamentals...",
    level: "BEGINNER",
    status: "PUBLISHED",
    visibility: "PUBLIC",
    modules: [
      {
        id: "mod-1",
        title: "Getting Started",
        order: 1,
        isRequired: true,
        estimatedDurationMinutes: 45,
        lessons: [
          { id: "les-1", title: "Course Introduction", order: 1, durationMinutes: 5 },
          { id: "les-2", title: "Setup", order: 2, durationMinutes: 15 },
        ],
      },
    ],
    tags: ["React", "JavaScript"],
    instructors: [{ id: "inst-1", name: "John Doe", email: "[email protected]" }],
    estimatedDurationMinutes: 345,
    createdAt: "2024-01-15T10:00:00Z",
    updatedAt: "2024-02-01T15:30:00Z",
  }}
  onEnroll={() => console.log("Enroll")}
/>