Content Development Guide

// Minimal lesson structure
import { LessonContainer, Callout, KeyTakeaways } from '@repo/ui'
import { Stack, Text } from '@mantine/core'

export default function Lesson01Introduction() {
  return (
    <LessonContainer
      title="Introduction"
      subtitle="Getting started with the platform"
      duration="10 min"
    >
      <Stack>
        <Text>Your lesson content here...</Text>

        <Callout type="info" title="What you'll learn">
          <Text>- First topic</Text>
          <Text>- Second topic</Text>
        </Callout>

        <KeyTakeaways items={[
          'First key point',
          'Second key point'
        ]} />
      </Stack>
    </LessonContainer>
  )
}

import {
  LessonContainer,
  Callout,
  KeyTakeaways,
  SectionHeader
} from '@repo/ui'
import { Text, Stack } from '@mantine/core'
import { TrainingConceptGrid } from '@/features/training/components'
import { IconTopic } from '@tabler/icons-react'

export default function Lesson01TopicName() {
  return (
    <LessonContainer
      title="Topic Name"
      subtitle="Description of what this covers"
      duration="10 min"
    >
      <Stack>
        {/* 1. Introduction */}
        <Text size="lg">
          Opening paragraph that sets context and hooks the learner.
        </Text>

        {/* 2. Learning objectives */}
        <Callout type="info" title="What you'll learn">
          <Stack gap="xs">
            <Text>- First learning objective</Text>
            <Text>- Second learning objective</Text>
            <Text>- Third learning objective</Text>
          </Stack>
        </Callout>

        {/* 3. Main content sections */}
        <SectionHeader icon={IconTopic} title="Section One" />
        <Text>Content for section one...</Text>

        <SectionHeader icon={IconTopic} title="Section Two" />
        <Text>Content for section two...</Text>

        {/* 4. Key takeaways */}
        <KeyTakeaways
          items={[
            'First key point',
            'Second key point',
            'Third key point'
          ]}
        />

        {/* 5. Transition to next lesson */}
        <Callout type="info" title="Next Up">
          In the next lesson, we'll explore...
        </Callout>
      </Stack>
    </LessonContainer>
  )
}

// Lesson01TopicQuiz.tsx
import { LessonQuiz, type QuizQuestion } from '@repo/ui'

const questions: QuizQuestion[] = [
  {
    id: 'q1',
    question: 'Question text here?',
    options: [
      { value: 'a', label: 'Option A' },
      { value: 'b', label: 'Option B' },
      { value: 'c', label: 'Option C' },
      { value: 'd', label: 'Option D' }
    ],
    correctAnswer: 'b'
  }
  // Add 3-5 questions per quiz
]

// Export for course.config.ts
export const lesson01TopicQuizConfig = { questions }

interface Props {
  onComplete?: (answers: Record<string, unknown>, score: number) => void
  onContinue?: () => void
}

export default function Lesson01TopicQuiz({ onComplete, onContinue }: Props) {
  return (
    <LessonQuiz
      questions={questions}
      onComplete={(answers, score) => onComplete?.(answers, score)}
      onContinue={onContinue}
    />
  )
}

import type { CourseConfig } from '../../types'

// Lesson imports
import Lesson01Topic from './Lesson01Topic'
import Lesson02Topic from './Lesson02Topic'

// Quiz imports
import Lesson01TopicQuiz, { lesson01TopicQuizConfig } from './Lesson01TopicQuiz'
import Lesson02TopicQuiz, { lesson02TopicQuizConfig } from './Lesson02TopicQuiz'

// Final assessment (if certified)
import FinalAssessment, { finalAssessmentConfig } from './FinalAssessment'

export const myCourse: CourseConfig = {
  slug: 'my-course',
  title: 'My Course',
  description: 'Course description for catalog.',
  audience: 'customer',  // 'internal' | 'developer' | 'customer' | 'public' | 'partner'
  estimatedDuration: '60 min',
  lessons: [
    {
      slug: 'topic-one',
      title: 'Topic One',
      description: 'What this lesson covers.',
      duration: '10 min',
      order: 1,
      component: Lesson01Topic,
      quiz: {
        passingScore: 100,
        questions: lesson01TopicQuizConfig.questions,
        component: Lesson01TopicQuiz
      }
    },
    {
      slug: 'topic-two',
      title: 'Topic Two',
      description: 'What this lesson covers.',
      duration: '15 min',
      order: 2,
      component: Lesson02Topic,
      quiz: {
        passingScore: 100,
        questions: lesson02TopicQuizConfig.questions,
        component: Lesson02TopicQuiz
      }
    }
  ],
  assessments: [
    {
      slug: 'final-assessment',
      title: 'Course Certification',
      passingScore: 80,
      questions: finalAssessmentConfig.questions,
      component: FinalAssessment
    }
  ],
  certification: {
    certificationSlug: 'my-course-certified',
    requiredLessons: 'all',
    requiredAssessments: [{ slug: 'final-assessment', minScore: 80 }]
  }
}

apps/command-center/src/features/training/content/courses/{slug}/
├── course.config.ts           # Course metadata and lesson registry
├── Lesson01TopicName.tsx      # Lesson content component
├── Lesson01TopicNameQuiz.tsx  # Inline quiz for lesson
├── Lesson02TopicName.tsx
├── Lesson02TopicNameQuiz.tsx
├── FinalAssessment.tsx        # Final certification assessment (optional)
└── PlaceholderLesson.tsx      # Placeholder for courses in development