react-native-elearn-ui 0.1.8 → 0.1.10

package/src/screens/PearlsScreen.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  SafeAreaView,
+  StatusBar,
+} from 'react-native';
+import { useElearnConfig } from '../context/ElearnConfigContext';
+import { useTheme } from '../context/ThemeContext';
+import { Typography, Card, Icon } from '../components';
+import { MOCK_PEARLS_TOPICS } from './pearlsMockData';
+import type { PearlTopic } from '../types';
+
+interface PearlsScreenProps {
+  onBack?: () => void;
+  hideHeader?: boolean;
+  onSelectTopic?: (topic: PearlTopic) => void;
+}
+
+export const PearlsScreen: React.FC<PearlsScreenProps> = ({
+  onBack,
+  hideHeader = false,
+  onSelectTopic,
+}) => {
+  const { callbacks } = useElearnConfig();
+  const theme = useTheme();
+
+  const handleBackPress = () => {
+    if (onBack) {
+      onBack();
+    } else {
+      callbacks.onBackToDashboard?.();
+    }
+  };
+
+  return (
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
+      <StatusBar barStyle="dark-content" />
+
+      {/* Header */}
+      {!hideHeader && (
+        <View style={styles.header}>
+          <TouchableOpacity onPress={handleBackPress} style={styles.backButton}>
+            <Icon name="arrow-left" size={20} color={theme.textPrimary} />
+          </TouchableOpacity>
+
+          <Typography variant="h2" bold style={styles.headerTitle}>
+            Pearls
+          </Typography>
+
+          <TouchableOpacity style={styles.headerRightBtn}>
+            <Icon name="search" size={20} color={theme.textPrimary} />
+          </TouchableOpacity>
+        </View>
+      )}
+
+      {/* Topics list view */}
+      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        <Typography variant="h2" bold color={theme.textPrimary} style={styles.sectionHeaderTitle}>
+          All Topics
+        </Typography>
+
+        <View style={styles.listContainer}>
+          {MOCK_PEARLS_TOPICS.map((topic) => (
+            <TouchableOpacity
+              key={topic.id}
+              activeOpacity={0.8}
+              onPress={() => onSelectTopic?.(topic)}
+            >
+              <Card bordered style={styles.topicCard}>
+                <View style={styles.topicRow}>
+                  {/* Left Circle Icon */}
+                  <View style={[styles.iconCircle, { backgroundColor: 'rgba(59, 130, 246, 0.08)' }]}>
+                    <Icon name="file-text" size={16} color="#3B82F6" />
+                  </View>
+                  {/* Right label */}
+                  <Typography variant="body" bold color={theme.textPrimary} style={styles.topicLabelText}>
+                    {topic.title}
+                  </Typography>
+                </View>
+              </Card>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  backButton: {
+    padding: 6,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  headerRightBtn: {
+    padding: 6,
+  },
+  scrollContent: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 24,
+  },
+  sectionHeaderTitle: {
+    fontSize: 16,
+    marginBottom: 16,
+  },
+  listContainer: {
+    marginTop: 4,
+  },
+  topicCard: {
+    padding: 14,
+    marginBottom: 10,
+    borderRadius: 12,
+  },
+  topicRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconCircle: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 14,
+  },
+  topicLabelText: {
+    fontSize: 14,
+  },
+});

package/src/screens/QbankScreen.tsx

@@ -12,13 +12,19 @@ import { useElearnConfig } from '../context/ElearnConfigContext';
 import { useTheme } from '../context/ThemeContext';
 import { Typography, Card, ProgressBar, Icon } from '../components';
 import type { IconName } from '../components';
+import type { Course } from '../types';
 
 interface QbankScreenProps {
   hideHeader?: boolean;
   onBack?: () => void;
+  onSelectCourse?: (course: Course) => void;
 }
 
-export const QbankScreen: React.FC<QbankScreenProps> = ({ hideHeader = false, onBack }) => {
+export const QbankScreen: React.FC<QbankScreenProps> = ({
+  hideHeader = false,
+  onBack,
+  onSelectCourse,
+}) => {
   const { config, callbacks } = useElearnConfig();
   const theme = useTheme();
 
@@ -154,7 +160,13 @@ export const QbankScreen: React.FC<QbankScreenProps> = ({ hideHeader = false, on
               <Card
                 key={course.id}
                 bordered
-                onPress={() => callbacks.onSelectCourse?.(course)}
+                onPress={() => {
+                  if (onSelectCourse) {
+                    onSelectCourse(course);
+                  } else {
+                    callbacks.onSelectCourse?.(course);
+                  }
+                }}
                 style={styles.subjectCard}
               >
                 <View style={styles.subjectRow}>

package/src/screens/QuestionScreen.tsx

@@ -14,22 +14,32 @@ import { useTheme } from '../context/ThemeContext';
 import { Typography, Button, Icon } from '../components';
 
 interface QuestionScreenProps {
-  quizId: string;
-  questions: Question[];
-  title: string;
+  quizId?: string;
+  questions?: Question[];
+  title?: string;
+  topicId?: string;
   onClose: () => void;
+  onFinishQuiz?: (quizId: string, results: QuizResults) => void;
   hideHeader?: boolean;
 }
 
 export const QuestionScreen: React.FC<QuestionScreenProps> = ({
   quizId,
   questions,
+  title,
+  topicId,
   onClose,
+  onFinishQuiz,
   hideHeader = false,
 }) => {
-  const { callbacks } = useElearnConfig();
+  const { config, callbacks } = useElearnConfig();
   const theme = useTheme();
 
+  const activeTopic = topicId ? config.courses?.flatMap((c) => c.topics).find((t) => t.id === topicId) : undefined;
+  const activeQuestions = questions || activeTopic?.questions || [];
+  const activeTitle = title || activeTopic?.title || 'Quiz';
+  const activeQuizId = quizId || topicId || '';
+
   const [currentIndex, setCurrentIndex] = useState(0);
   const [selectedOption, setSelectedOption] = useState<number | null>(null);
   const [isAnswered, setIsAnswered] = useState(false);
@@ -38,7 +48,7 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
   const [startTime] = useState(Date.now());
   const [isPaused, setIsPaused] = useState(false);
 
-  if (!questions || questions.length === 0) {
+  if (!activeQuestions || activeQuestions.length === 0) {
     return (
       <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
         <View style={styles.errorContainer}>
@@ -49,7 +59,7 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
     );
   }
 
-  const currentQuestion = questions[currentIndex]!;
+  const currentQuestion = activeQuestions[currentIndex]!;
   const optionPrefixes = ['A', 'B', 'C', 'D', 'E', 'F'];
 
   const handleOptionPress = (index: number) => {
@@ -68,19 +78,19 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
   };
 
   const handleNext = () => {
-    if (currentIndex < questions.length - 1) {
+    if (currentIndex < activeQuestions.length - 1) {
       setCurrentIndex((prev) => prev + 1);
       setSelectedOption(null);
       setIsAnswered(false);
     } else {
       // Last question - finish quiz
       const totalTimeSeconds = Math.round((Date.now() - startTime) / 1000);
-      const wrongCount = questions.length - correctCount;
-      const accuracy = Math.round((correctCount / questions.length) * 100);
+      const wrongCount = activeQuestions.length - correctCount;
+      const accuracy = Math.round((correctCount / activeQuestions.length) * 100);
 
       const results: QuizResults = {
-        quizId,
-        totalQuestions: questions.length,
+        quizId: activeQuizId,
+        totalQuestions: activeQuestions.length,
         correctCount,
         wrongCount,
         skippedCount: 0,
@@ -89,7 +99,11 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
         userAnswers,
       };
 
-      callbacks.onFinishQuiz?.(quizId, results);
+      if (onFinishQuiz) {
+        onFinishQuiz(activeQuizId, results);
+      } else {
+        callbacks.onFinishQuiz?.(activeQuizId, results);
+      }
     }
   };
 
@@ -105,7 +119,7 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
           </TouchableOpacity>
           
           <Typography variant="h2" bold style={styles.headerTitle}>
-            QBank
+            {activeTitle || 'QBank'}
           </Typography>
 
           <TouchableOpacity style={styles.shareButton}>
@@ -119,7 +133,7 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
         {/* Question Header & Pause/Bookmark Actions Row */}
         <View style={styles.metaRow}>
           <Typography variant="caption" bold color={theme.textSecondary} style={styles.questionNumLabel}>
-            QUESTION {currentIndex + 1}/{questions.length}
+            QUESTION {currentIndex + 1}/{activeQuestions.length}
           </Typography>
           <View style={styles.metaActions}>
             <TouchableOpacity style={styles.metaActionBtn}>

package/src/screens/QuizStartScreen.tsx

@@ -6,32 +6,67 @@ import {
   SafeAreaView,
   StatusBar,
 } from 'react-native';
-import type { Topic, Course } from '../types';
+import type { Topic, Course, Question } from '../types';
 import { useElearnConfig } from '../context/ElearnConfigContext';
 import { useTheme } from '../context/ThemeContext';
 import { Typography, Card, Button, Icon } from '../components';
 
 interface QuizStartScreenProps {
-  course: Course;
-  topic: Topic;
+  course?: Course;
+  courseId?: string;
+  topic?: Topic;
+  topicId?: string;
   onBack: () => void;
   hideHeader?: boolean;
+  onStartQuiz?: (quizId: string, questions: Question[], title: string) => void;
 }
 
 export const QuizStartScreen: React.FC<QuizStartScreenProps> = ({
+  course,
+  courseId,
   topic,
+  topicId,
   onBack,
   hideHeader = false,
+  onStartQuiz,
 }) => {
-  const { callbacks } = useElearnConfig();
+  const { config, callbacks } = useElearnConfig();
   const theme = useTheme();
 
+  const activeCourse = course || config.courses?.find((c) => c.id === courseId);
+  const activeTopic = topic || activeCourse?.topics.find((t) => t.id === topicId) || config.courses?.flatMap((c) => c.topics).find((t) => t.id === topicId);
+
   const handleStart = () => {
-    if (callbacks.onStartQuiz && topic.questions) {
-      callbacks.onStartQuiz(topic.id, topic.questions, topic.title);
+    if (activeTopic && activeTopic.questions) {
+      if (onStartQuiz) {
+        onStartQuiz(activeTopic.id, activeTopic.questions, activeTopic.title);
+      } else {
+        callbacks.onStartQuiz?.(activeTopic.id, activeTopic.questions, activeTopic.title);
+      }
     }
   };
 
+  if (!activeTopic) {
+    return (
+      <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
+          <Typography variant="h2" bold style={{ marginBottom: 12 }}>Topic not found</Typography>
+          <TouchableOpacity
+            onPress={onBack}
+            style={{
+              paddingHorizontal: 20,
+              paddingVertical: 10,
+              borderRadius: 8,
+              backgroundColor: theme.primary,
+            }}
+          >
+            <Typography variant="body" bold color="#FFFFFF">Go Back</Typography>
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
   // Mock list of glance topics matching mockup 3
   const glanceTopics = [
     'Cerebral Cortex',
@@ -67,7 +102,7 @@ export const QuizStartScreen: React.FC<QuizStartScreenProps> = ({
           
           {/* Section Category Title */}
           <Typography variant="h1" bold color={theme.textPrimary} style={styles.categoryTitle}>
-            {topic.category || 'Neuro Anatomy'}
+            {activeTopic.category || 'Neuro Anatomy'}
           </Typography>
 
           {/* Main Info Box */}
@@ -80,10 +115,10 @@ export const QuizStartScreen: React.FC<QuizStartScreenProps> = ({
               {/* Right details */}
               <View style={styles.topicHeaderDetails}>
                 <Typography variant="h2" bold color={theme.textPrimary} style={styles.topicMainTitle}>
-                  {topic.title}
+                  {activeTopic.title}
                 </Typography>
                 <Typography variant="caption" color={theme.textSecondary}>
-                  {topic.totalQuestions} Questions
+                  {activeTopic.totalQuestions} Questions
                 </Typography>
               </View>
             </View>
@@ -94,7 +129,7 @@ export const QuizStartScreen: React.FC<QuizStartScreenProps> = ({
               onPress={handleStart}
               variant="primary"
               style={[styles.startButton, { backgroundColor: theme.primary }]}
-              disabled={!topic.questions || topic.questions.length === 0}
+              disabled={!activeTopic.questions || activeTopic.questions.length === 0}
             />
           </Card>
 

package/src/screens/ResultScreen.tsx

@@ -15,7 +15,8 @@ import { Typography, Card, CircularProgress, Button, Icon } from '../components'
 
 interface ResultScreenProps {
   results: QuizResults;
-  questions: Question[];
+  questions?: Question[];
+  topicId?: string;
   onClose: () => void;
   onReviewAnswers?: () => void;
   hideHeader?: boolean;
@@ -24,12 +25,16 @@ interface ResultScreenProps {
 export const ResultScreen: React.FC<ResultScreenProps> = ({
   results,
   questions,
+  topicId,
   onClose,
   hideHeader = false,
 }) => {
-  const { getString } = useElearnConfig();
+  const { config, getString } = useElearnConfig();
   const theme = useTheme();
 
+  const activeTopic = topicId ? config.courses?.flatMap((c) => c.topics).find((t) => t.id === topicId) : undefined;
+  const activeQuestions = questions || activeTopic?.questions || [];
+
   // Selected question index for individual review
   const [selectedReviewIndex, setSelectedReviewIndex] = useState<number | null>(null);
 
@@ -51,14 +56,14 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
   };
 
   const handleNextReview = () => {
-    if (selectedReviewIndex !== null && selectedReviewIndex < questions.length - 1) {
+    if (selectedReviewIndex !== null && selectedReviewIndex < activeQuestions.length - 1) {
       setSelectedReviewIndex(selectedReviewIndex + 1);
     }
   };
 
   // --- Sub-View: Individual Question Detail Review ---
   if (selectedReviewIndex !== null) {
-    const currentReviewQuestion = questions[selectedReviewIndex]!;
+    const currentReviewQuestion = activeQuestions[selectedReviewIndex]!;
     const userAnswerIdx = results.userAnswers[currentReviewQuestion.id];
     // Removed unused isCorrect variable
 
@@ -88,7 +93,7 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
           {/* Question Index Meta */}
           <View style={styles.metaRow}>
             <Typography variant="caption" bold color={theme.textSecondary} style={styles.questionNumLabel}>
-              QUESTION {selectedReviewIndex + 1}/{questions.length}
+              QUESTION {selectedReviewIndex + 1}/{activeQuestions.length}
             </Typography>
             <View style={styles.metaActions}>
               <TouchableOpacity style={styles.metaActionBtn}>
@@ -211,11 +216,11 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
           {/* Next Button */}
           <TouchableOpacity
             onPress={handleNextReview}
-            disabled={selectedReviewIndex === questions.length - 1}
+            disabled={selectedReviewIndex === activeQuestions.length - 1}
             style={[
               styles.nextActionBtn,
               { backgroundColor: theme.primary },
-              selectedReviewIndex === questions.length - 1 && { opacity: 0.4 }
+              selectedReviewIndex === activeQuestions.length - 1 && { opacity: 0.4 }
             ]}
           >
             <Typography variant="body" bold color="#FFFFFF">
@@ -303,7 +308,7 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
         </View>
 
         <View style={styles.reviewList}>
-          {questions.map((question, idx) => {
+          {activeQuestions.map((question, idx) => {
             const userAnswerIdx = results.userAnswers[question.id];
             const isCorrect = userAnswerIdx === question.correctOptionIndex;
 

package/src/screens/TopicListScreen.tsx

@@ -13,26 +13,53 @@ import { useTheme } from '../context/ThemeContext';
 import { Typography, Card, Icon } from '../components';
 
 interface TopicListScreenProps {
-  course: Course;
+  course?: Course;
+  courseId?: string;
   onBack: () => void;
   hideHeader?: boolean;
+  onSelectTopic?: (course: Course, topic: Topic) => void;
 }
 
 export const TopicListScreen: React.FC<TopicListScreenProps> = ({
   course,
+  courseId,
   onBack,
   hideHeader = false,
+  onSelectTopic,
 }) => {
-  const { callbacks } = useElearnConfig();
+  const { config, callbacks } = useElearnConfig();
   const theme = useTheme();
 
+  const activeCourse = course || config.courses?.find((c) => c.id === courseId);
+
   // Active filter tab
   const [activeTab, setActiveTab] = useState('All');
   const tabs = ['All', 'New', 'Completed', 'Paused', 'Not Started'];
 
+  if (!activeCourse) {
+    return (
+      <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
+          <Typography variant="h2" bold style={{ marginBottom: 12 }}>Course not found</Typography>
+          <TouchableOpacity
+            onPress={onBack}
+            style={{
+              paddingHorizontal: 20,
+              paddingVertical: 10,
+              borderRadius: 8,
+              backgroundColor: theme.primary,
+            }}
+          >
+            <Typography variant="body" bold color="#FFFFFF">Go Back</Typography>
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
   // Group topics by category
   const categoriesMap: { [key: string]: Topic[] } = {};
-  course.topics.forEach((topic) => {
+  activeCourse.topics.forEach((topic) => {
     const cat = topic.category || 'GENERAL';
     if (!categoriesMap[cat]) {
       categoriesMap[cat] = [];
@@ -69,10 +96,10 @@ export const TopicListScreen: React.FC<TopicListScreenProps> = ({
         {/* Subject Header Suffix */}
         <View style={styles.subjectHeader}>
           <Typography variant="h1" bold color={theme.textPrimary} style={styles.subjectTitle}>
-            {course.title}
+            {activeCourse.title}
           </Typography>
           <Typography variant="body" color={theme.textSecondary}>
-            {course.topics.length} Modules
+            {activeCourse.topics.length} Modules
           </Typography>
         </View>
 
@@ -122,7 +149,7 @@ export const TopicListScreen: React.FC<TopicListScreenProps> = ({
                   {list.map((topic) => {
                     globalIndex++;
                     const currentIndex = globalIndex;
-                    const isLastInCourse = currentIndex === course.topics.length;
+                    const isLastInCourse = currentIndex === activeCourse.topics.length;
                     
                     return (
                       <View key={topic.id} style={styles.timelineItemRow}>
@@ -146,7 +173,13 @@ export const TopicListScreen: React.FC<TopicListScreenProps> = ({
                         {/* Right Side Info Card */}
                         <TouchableOpacity
                           activeOpacity={0.8}
-                          onPress={() => callbacks.onSelectTopic?.(course, topic)}
+                          onPress={() => {
+                            if (onSelectTopic) {
+                              onSelectTopic(activeCourse, topic);
+                            } else {
+                              callbacks.onSelectTopic?.(activeCourse, topic);
+                            }
+                          }}
                           style={styles.cardTouchable}
                         >
                           <Card bordered style={styles.topicCard}>

package/src/screens/index.ts

@@ -4,3 +4,6 @@ export { TopicListScreen } from './TopicListScreen';
 export { QuizStartScreen } from './QuizStartScreen';
 export { QuestionScreen } from './QuestionScreen';
 export { ResultScreen } from './ResultScreen';
+export { PearlsScreen } from './PearlsScreen';
+export { PearlChaptersScreen } from './PearlChaptersScreen';
+export { PearlReaderScreen } from './PearlReaderScreen';

package/src/screens/pearlsMockData.ts

@@ -0,0 +1,70 @@
+import type { PearlTopic } from '../types';
+
+export const MOCK_PEARLS_TOPICS: PearlTopic[] = [
+  {
+    id: 'topic_head_neck',
+    title: 'Head and neck',
+    sections: {
+      'Head and Neck': [
+        {
+          id: 'hn_c1',
+          number: 1,
+          title: 'Classify sino-nasal neoplasam. Discuss the newer entities',
+          isFree: true,
+          bullets: [
+            'Benign Neoplasms: Benign sino-nasal tumors are generally slow-growing and less likely to invade surrounding structures. Common benign types include inverted papilloma, oncocytic Schneiderian papilloma, and fungiform papilloma, all of which originate from the Schneiderian mucosa. Inverted papilloma is notable for its local aggressiveness and high recurrence rate, sometimes exhibiting malignant transformation into squamous cell carcinoma.',
+            'Malignant Neoplasms: Malignant tumors of the sino-nasal tract are rare but clinically significant due to their aggressive behavior, late presentation, and complex anatomical constraints that limit surgical access. The most common malignant tumor is squamous cell carcinoma, often arising from dysplastic or papillomatous lesions.',
+            'Esthesioneuroblastoma: A notable entity originating from the olfactory epithelium and displaying variable degrees of malignancy. Additionally, melanoma, lymphoma, and undifferentiated carcinoma can also occur in the sino-nasal region, often presenting with nasal obstruction, epistaxis, and facial pain.'
+          ]
+        },
+        {
+          id: 'hn_c2',
+          number: 2,
+          title: 'Histologic variants of ameloblastoma',
+          isLocked: true,
+          bullets: [
+            'Ameloblastoma is a benign but locally aggressive odontogenic neoplasm.',
+            'Follicular and plexiform are the most common histologic patterns.',
+            'Unicystic variants have a better prognosis and lower recurrence rates.'
+          ]
+        },
+        {
+          id: 'hn_c3',
+          number: 3,
+          title: 'Role of brush ctology in diagnosis of oral cancerous and precancerous lessions',
+          isLocked: true,
+          bullets: [
+            'Oral brush cytology is a non-invasive screening aid.',
+            'High sensitivity for identifying cellular dysplasias.',
+            'Must be followed by scalpel biopsy for definitive diagnosis.'
+          ]
+        }
+      ],
+      'Eye': [
+        {
+          id: 'eye_c1',
+          number: 1,
+          title: 'Classify sino-nasal neoplasam. Discuss the newer entities',
+          isLocked: true,
+          bullets: []
+        },
+        {
+          id: 'eye_c2',
+          number: 2,
+          title: 'Histologic variants of ameloblastoma',
+          isLocked: true,
+          bullets: []
+        }
+      ]
+    }
+  },
+  { id: 'topic_brain_spine', title: 'Brain, Spine and Meninges', sections: {} },
+  { id: 'topic_breast', title: 'Breast Pathology', sections: {} },
+  { id: 'topic_skin', title: 'Skin and Connective Tissue', sections: {} },
+  { id: 'topic_kidney', title: 'Kidney & Urinary Tract', sections: {} },
+  { id: 'topic_gastro', title: 'Gastro-Intestinal System', sections: {} },
+  { id: 'topic_endocrine', title: 'Endocrine Pathology', sections: {} },
+  { id: 'topic_general', title: 'General Pathology', sections: {} },
+  { id: 'topic_male_genital', title: 'Male Genital System', sections: {} },
+  { id: 'topic_thoracic', title: 'Thoracic Pathology', sections: {} }
+];

package/src/types/index.ts

@@ -189,3 +189,20 @@ export interface HomeScreenParams {
     continueLearning?: { title?: string; show?: boolean };
   };
 }
+
+export interface PearlChapter {
+  id: string;
+  number: number;
+  title: string;
+  isFree?: boolean;
+  isLocked?: boolean;
+  bullets: string[];
+}
+
+export interface PearlTopic {
+  id: string;
+  title: string;
+  sections?: {
+    [sectionName: string]: PearlChapter[];
+  };
+}