react-native-elearn-ui 0.1.11 → 0.1.13

package/src/screens/PearlsScreen.tsx

@@ -1,147 +0,0 @@
-import React from 'react';
-import {
-  View,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  StatusBar,
-} from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-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;
-  title?: string;
-}
-
-export const PearlsScreen: React.FC<PearlsScreenProps> = ({
-  onBack,
-  hideHeader = false,
-  onSelectTopic,
-  title = 'Pearls',
-}) => {
-  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}>
-            {title}
-          </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

@@ -1,327 +0,0 @@
-import React from 'react';
-import {
-  View,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  StatusBar,
-  Image,
-} from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-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,
-  onSelectCourse,
-}) => {
-  const { config, callbacks } = useElearnConfig();
-  const theme = useTheme();
-
-  const courses = config.courses || [];
-
-  const handleBack = () => {
-    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={handleBack}
-            style={[styles.backButton, { borderColor: theme.border }]}
-          >
-            <Icon name="arrow-left" size={20} color={theme.textPrimary} />
-          </TouchableOpacity>
-          <Typography variant="h2" bold style={styles.headerTitle}>
-            QBank
-          </Typography>
-          <TouchableOpacity style={styles.searchButton}>
-            <Icon name="search" size={20} color={theme.textPrimary} />
-          </TouchableOpacity>
-        </View>
-      )}
-
-      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
-        
-        {/* Promoted Premium Card */}
-        <Card style={styles.premiumCard}>
-          <View style={styles.premiumTextContainer}>
-            <Typography variant="h2" bold color={theme.textPrimary} style={styles.premiumTitle}>
-              More than 100+ Courses in premium
-            </Typography>
-            <Typography variant="caption" color={theme.textSecondary} style={styles.premiumSub}>
-              Advance your skills with top-rated, expert-led courses anytime
-            </Typography>
-            <TouchableOpacity style={[styles.premiumBtn, { backgroundColor: theme.primary }]}>
-              <Typography variant="caption" bold color="#FFFFFF">
-                Get Premium
-              </Typography>
-            </TouchableOpacity>
-          </View>
-          <View style={styles.premiumImageContainer}>
-            <Image
-              source={{ uri: 'https://images.unsplash.com/photo-1559839734-2b71ea197ec2?q=80&w=200&auto=format&fit=crop' }}
-              style={styles.premiumImage}
-            />
-          </View>
-        </Card>
-
-        {/* Quick Options */}
-        <View style={styles.optionsRow}>
-          <TouchableOpacity style={styles.optionBtn}>
-            <View style={[styles.optionIconContainer, { backgroundColor: 'rgba(59, 130, 246, 0.1)' }]}>
-              <Icon name="bookmark" size={18} color="#3B82F6" />
-            </View>
-            <Typography variant="caption" bold color={theme.textPrimary} style={styles.optionLabel}>
-              Bookmark
-            </Typography>
-          </TouchableOpacity>
-
-          <TouchableOpacity style={styles.optionBtn}>
-            <View style={[styles.optionIconContainer, { backgroundColor: 'rgba(16, 185, 129, 0.1)' }]}>
-              <Icon name="clipboard" size={18} color="#10B981" strokeWidth={1.5} />
-            </View>
-            <Typography variant="caption" bold color={theme.textPrimary} style={styles.optionLabel}>
-              Costume module
-            </Typography>
-          </TouchableOpacity>
-
-          <TouchableOpacity style={styles.optionBtn}>
-            <View style={[styles.optionIconContainer, { backgroundColor: 'rgba(168, 85, 247, 0.1)' }]}>
-              <Icon name="activity" size={18} color="#A855F7" />
-            </View>
-            <Typography variant="caption" bold color={theme.textPrimary} style={styles.optionLabel}>
-              Track Qbank
-            </Typography>
-          </TouchableOpacity>
-        </View>
-
-        {/* Subjects List */}
-        <View style={styles.listContainer}>
-          {courses.map((course) => {
-            const pct = Math.round(course.progress * 100);
-            
-            // Map course icon name or fall back to diamond
-            let iconName: IconName = 'diamond';
-            let iconBg = 'rgba(249, 115, 22, 0.1)';
-            let iconColor = '#F97316';
-            
-            const titleLower = course.title.toLowerCase();
-            if (titleLower.includes('anatomy')) {
-              iconName = 'diamond';
-              iconBg = 'rgba(251, 146, 60, 0.1)';
-              iconColor = '#EA580C';
-            } else if (titleLower.includes('biochem')) {
-              iconName = 'dna';
-              iconBg = 'rgba(168, 85, 247, 0.1)';
-              iconColor = '#A855F7';
-            } else if (titleLower.includes('physio')) {
-              iconName = 'user';
-              iconBg = 'rgba(239, 68, 68, 0.1)';
-              iconColor = '#EF4444';
-            } else if (titleLower.includes('ophthalmology')) {
-              iconName = 'eye';
-              iconBg = 'rgba(59, 130, 246, 0.1)';
-              iconColor = '#3B82F6';
-            } else if (titleLower.includes('pharmacology')) {
-              iconName = 'award';
-              iconBg = 'rgba(245, 158, 11, 0.1)';
-              iconColor = '#D97706';
-            } else if (titleLower.includes('microbiology')) {
-              iconName = 'atom';
-              iconBg = 'rgba(236, 72, 153, 0.1)';
-              iconColor = '#DB2777';
-            } else if (titleLower.includes('pathology')) {
-              iconName = 'flask';
-              iconBg = 'rgba(20, 184, 166, 0.1)';
-              iconColor = '#0D9488';
-            }
-            
-            return (
-              <Card
-                key={course.id}
-                bordered
-                onPress={() => {
-                  if (onSelectCourse) {
-                    onSelectCourse(course);
-                  } else {
-                    callbacks.onSelectCourse?.(course);
-                  }
-                }}
-                style={styles.subjectCard}
-              >
-                <View style={styles.subjectRow}>
-                  {/* Left Icon Container */}
-                  <View style={[styles.subjectIconBox, { backgroundColor: iconBg }]}>
-                    <Icon name={iconName} size={22} color={iconColor} />
-                  </View>
-                  
-                  {/* Right Content */}
-                  <View style={styles.subjectInfo}>
-                    <Typography variant="h3" bold color={theme.textPrimary} style={styles.subjectTitle}>
-                      {course.title}
-                    </Typography>
-                    
-                    <ProgressBar progress={course.progress} height={6} style={styles.subjectProgressBar} />
-                    
-                    <View style={styles.subjectStatsRow}>
-                      <Typography variant="caption" color={theme.textSecondary}>
-                        {course.completedQuestions} / {course.totalQuestions} Modules
-                      </Typography>
-                      <Typography variant="caption" bold color={theme.textPrimary}>
-                        {pct}%
-                      </Typography>
-                    </View>
-                  </View>
-                </View>
-              </Card>
-            );
-          })}
-        </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',
-  },
-  searchButton: {
-    padding: 6,
-  },
-  scrollContent: {
-    paddingHorizontal: 16,
-    paddingBottom: 24,
-  },
-  premiumCard: {
-    flexDirection: 'row',
-    backgroundColor: '#FFFFFF',
-    borderRadius: 16,
-    padding: 16,
-    marginTop: 12,
-    borderWidth: 1,
-    borderColor: '#E2E8F0',
-  },
-  premiumTextContainer: {
-    flex: 1.3,
-    justifyContent: 'center',
-  },
-  premiumTitle: {
-    fontSize: 15,
-    lineHeight: 19,
-    marginBottom: 4,
-  },
-  premiumSub: {
-    fontSize: 11,
-    lineHeight: 14,
-    marginBottom: 10,
-  },
-  premiumBtn: {
-    alignSelf: 'flex-start',
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 8,
-  },
-  premiumImageContainer: {
-    flex: 0.7,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  premiumImage: {
-    width: 70,
-    height: 70,
-    borderRadius: 35,
-    backgroundColor: '#E9D5FF', // Light purple
-  },
-  optionsRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginVertical: 16,
-  },
-  optionBtn: {
-    flex: 1,
-    alignItems: 'center',
-  },
-  optionIconContainer: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: 6,
-  },
-  optionLabel: {
-    fontSize: 12,
-  },
-  listContainer: {
-    marginTop: 4,
-  },
-  subjectCard: {
-    padding: 10,
-    marginBottom: 8,
-    borderRadius: 12,
-  },
-  subjectRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  subjectIconBox: {
-    width: 40,
-    height: 40,
-    borderRadius: 10,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 12,
-  },
-  subjectInfo: {
-    flex: 1,
-  },
-  subjectTitle: {
-    fontSize: 14,
-    marginBottom: 2,
-  },
-  subjectProgressBar: {
-    marginVertical: 2,
-  },
-  subjectStatsRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginTop: 2,
-  },
-});