Training Component Reference

import { LessonContainer } from '@repo/ui'

<LessonContainer
  title="Lesson Title"
  subtitle="Course Name"
  duration="15 min"
>
  {/* Lesson content */}
</LessonContainer>

import { LessonContent } from '@repo/ui'

<LessonContent>
  <h2>Section Title</h2>
  <p>Paragraph content with proper styling...</p>
</LessonContent>

import { Callout } from '@repo/ui'

<Callout type="info" title="Note">
  Information the learner should know.
</Callout>

<Callout type="tip" title="Pro Tip">
  Helpful advice or best practices.
</Callout>

<Callout type="warning" title="Caution">
  Something to be careful about.
</Callout>

<Callout type="danger" title="Important">
  Critical information or common mistakes.
</Callout>

import { QuickFact } from '@repo/ui'

<QuickFact>
  AI agents can reduce manual work by up to 80% in repetitive tasks.
</QuickFact>

import { KeyTakeaways } from '@repo/ui'

<KeyTakeaways items={[
  'First key point learners should remember',
  'Second key point',
  'Third key point'
]} />

// Custom title
<KeyTakeaways title="Summary" items={[...]} />

import { SectionHeader } from '@repo/ui'
import { IconBrain } from '@tabler/icons-react'

<SectionHeader
  icon={IconBrain}
  title="AI Fundamentals"
  color="blue"
  order={2}
/>

import { FeatureCard } from '@repo/ui'
import { IconBrain } from '@tabler/icons-react'

<FeatureCard
  icon={IconBrain}
  title="AI Agents"
  description="Specialized AI workers that perform specific tasks"
  color="violet"
/>

import { ConceptGrid } from '@repo/ui'
import { IconRoute, IconBrain, IconPlug } from '@tabler/icons-react'

<ConceptGrid
  columns={3}
  items={[
    {
      icon: IconRoute,
      title: 'Workflows',
      description: 'Step-by-step processes',
      color: 'blue'
    },
    {
      icon: IconBrain,
      title: 'Agents',
      description: 'AI decision makers',
      color: 'violet'
    },
    {
      icon: IconPlug,
      title: 'Integrations',
      description: 'External connections',
      color: 'cyan'
    }
  ]}
/>

import { StepCard } from '@repo/ui'

<StepCard step={1} title="Create a new workflow" isActive>
  <Text>Navigate to the Workflows section...</Text>
</StepCard>

<StepCard step={2} title="Configure triggers">
  <Text>Set up how the workflow starts...</Text>
</StepCard>

import { ProcessTimeline } from '@repo/ui'
import { IconBrain, IconPlayerPlay, IconCircleCheck, IconRefresh } from '@tabler/icons-react'

<ProcessTimeline
  steps={[
    { title: 'Think', description: 'Analyze the situation and plan next action', icon: IconBrain },
    { title: 'Act', description: 'Execute using available tools', icon: IconPlayerPlay },
    { title: 'Evaluate', description: 'Check if goal is achieved', icon: IconCircleCheck },
    { title: 'Loop', description: 'Repeat until task is complete', icon: IconRefresh },
  ]}
/>

interface ProcessStep {
  title: string      // Step title
  description: string // Step description
  icon: Icon         // Tabler icon component
}

import { CodeBlock } from '@repo/ui'

<CodeBlock language="typescript" title="Example Agent">
  {`const agent = new Agent({
  name: 'My Agent',
  model: 'claude-sonnet-4'
})`}
</CodeBlock>

<CodeBlock language="bash" showLineNumbers>
  {`npm install @repo/ui
npm run dev`}
</CodeBlock>

import { ProgressRing } from '@repo/ui'

<ProgressRing value={75} label="Course Progress" />

<ProgressRing value={100} label="Complete!" size={80} thickness={8} />

// Quiz component file (Lesson01Quiz.tsx)
import { LessonQuiz, type QuizQuestion } from '@repo/ui'

const questions: QuizQuestion[] = [
  {
    id: 'q1',
    question: 'What is the primary purpose of workflows?',
    options: [
      { value: 'a', label: 'AI decision making' },
      { value: 'b', label: 'Step-by-step automation' },
      { value: 'c', label: 'Data storage' }
    ],
    correctAnswer: 'b'
  },
  {
    id: 'q2',
    question: 'When should you use an agent instead of a workflow?',
    options: [
      { value: 'a', label: 'For predictable processes' },
      { value: 'b', label: 'For tasks requiring judgment' },
      { value: 'c', label: 'For scheduled tasks' }
    ],
    correctAnswer: 'b'
  }
]

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

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

// FinalAssessment.tsx
import { AssessmentQuiz, type AssessmentQuestion, type AssessmentResult } from '@repo/ui'

export const finalAssessmentConfig = {
  questions: [
    // Radio question (single select)
    {
      id: 'q1',
      type: 'radio',
      question: 'What is the primary purpose of workflows?',
      description: 'Think about predictability and consistency.',
      options: [
        { value: 'a', label: 'AI decision making', description: 'Requires judgment' },
        { value: 'b', label: 'Step-by-step automation', description: 'Predictable processes' },
        { value: 'c', label: 'Data storage', description: 'Persistence layer' }
      ],
      correctAnswer: 'b'
    },
    // Checkbox question (multi-select)
    {
      id: 'q2',
      type: 'checkbox',
      question: 'Which are valid trigger types? (Select all that apply)',
      options: [
        { value: 'manual', label: 'Manual (button click)' },
        { value: 'scheduled', label: 'Scheduled (time-based)' },
        { value: 'event', label: 'Event-driven (webhook)' },
        { value: 'invalid', label: 'Telepathic (mind reading)' }
      ],
      correctAnswers: ['manual', 'scheduled', 'event']
    }
  ] as const satisfies readonly AssessmentQuestion[]
}

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

export default function FinalAssessment({ onComplete }: FinalAssessmentProps) {
  const handleComplete = (result: AssessmentResult) => {
    onComplete?.(result.answers, result.score)
  }

  return (
    <AssessmentQuiz
      questions={finalAssessmentConfig.questions}
      passingScore={80}
      onComplete={handleComplete}
      shuffle={true}
    />
  )
}

import { SectionHeader } from '@repo/ui'
import { IconBrain } from '@tabler/icons-react'

<SectionHeader icon={IconBrain} title="AI Fundamentals" />

import { TrainingConceptGrid } from '@/features/training/components'
import { IconRoute, IconBrain } from '@tabler/icons-react'

<TrainingConceptGrid
  columns={2}
  items={[
    { icon: IconRoute, title: 'Workflows', description: 'Step sequences' },
    { icon: IconBrain, title: 'Agents', description: 'AI decision makers' }
  ]}
/>

import { ReferenceTable } from '@/features/training/components'
import { IconRoute, IconBrain } from '@tabler/icons-react'

<ReferenceTable
  columns={[
    { header: 'Component', key: 'name', width: '25%' },
    { header: 'Purpose', key: 'purpose' },
    { header: 'Use When', key: 'when' }
  ]}
  rows={[
    {
      id: 'workflow',
      name: 'Workflow',
      purpose: 'Execute predictable steps',
      when: 'Process is repeatable',
      icon: IconRoute,
      color: 'blue'
    },
    {
      id: 'agent',
      name: 'Agent',
      purpose: 'Make decisions',
      when: 'Task requires judgment',
      icon: IconBrain,
      color: 'violet'
    }
  ]}
/>

import {
  TRAINING_PRIMARY_COLOR,
  TRAINING_SEMANTIC_COLORS,
  getTrainingColor
} from '@/features/training/components'

// Primary color (blue) - use for most content
TRAINING_PRIMARY_COLOR // 'blue'

// Semantic colors - use sparingly for specific meanings
TRAINING_SEMANTIC_COLORS.success  // 'green' - positive outcomes
TRAINING_SEMANTIC_COLORS.warning  // 'orange' - caution
TRAINING_SEMANTIC_COLORS.error    // 'red' - negative outcomes
TRAINING_SEMANTIC_COLORS.neutral  // 'gray' - dimmed content

// Helper function
getTrainingColor('success') // 'green'
getTrainingColor()          // 'blue' (default)