react-native-elearn-ui 0.1.5 → 0.1.6

package/src/components/Icon.tsx

@@ -26,7 +26,14 @@ export type IconName =
   | 'bookmark'
   | 'file-text'
   | 'download'
-  | 'share';
+  | 'share'
+  | 'lock'
+  | 'activity'
+  | 'eye'
+  | 'clipboard'
+  | 'whatsapp'
+  | 'alert-circle'
+  | 'pause-circle';
 
 interface IconProps {
   name: IconName;
@@ -407,6 +414,123 @@ export const Icon: React.FC<IconProps> = ({
             fill="none"
           />
         );
+      case 'lock':
+        return (
+          <G>
+            <Path
+              d="M3 11v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V11a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              fill="none"
+            />
+            <Path
+              d="M7 9V5a5 5 0 0 1 10 0v4"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              fill="none"
+            />
+          </G>
+        );
+      case 'activity':
+        return (
+          <Path
+            d="M22 12h-4l-3 9L9 3l-3 9H2"
+            stroke={iconColor}
+            strokeWidth={strokeWidth}
+            fill="none"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        );
+      case 'eye':
+        return (
+          <G>
+            <Path
+              d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              fill="none"
+            />
+            <Circle
+              cx="12"
+              cy="12"
+              r="3"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              fill="none"
+            />
+          </G>
+        );
+      case 'clipboard':
+        return (
+          <G>
+            <Path
+              d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              fill="none"
+            />
+            <Path
+              d="M8 2h8v4H8z"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              fill="none"
+            />
+          </G>
+        );
+      case 'whatsapp':
+        return (
+          <Path
+            d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
+            stroke={iconColor}
+            strokeWidth={strokeWidth}
+            fill="none"
+          />
+        );
+      case 'alert-circle':
+        return (
+          <G>
+            <Circle
+              cx="12"
+              cy="12"
+              r="10"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              fill="none"
+            />
+            <Path
+              d="M12 8v4"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              strokeLinecap="round"
+            />
+            <Circle
+              cx="12"
+              cy="16"
+              r="0.5"
+              fill={iconColor}
+            />
+          </G>
+        );
+      case 'pause-circle':
+        return (
+          <G>
+            <Circle
+              cx="12"
+              cy="12"
+              r="10"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              fill="none"
+            />
+            <Path
+              d="M10 15V9M14 15V9"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              strokeLinecap="round"
+            />
+          </G>
+        );
       default:
         return null;
     }

package/src/screens/QbankScreen.tsx

@@ -6,17 +6,19 @@ import {
   TouchableOpacity,
   SafeAreaView,
   StatusBar,
+  Image,
 } from 'react-native';
 import { useElearnConfig } from '../context/ElearnConfigContext';
 import { useTheme } from '../context/ThemeContext';
 import { Typography, Card, ProgressBar, Icon } from '../components';
+import type { IconName } from '../components';
 
 interface QbankScreenProps {
   hideHeader?: boolean;
 }
 
 export const QbankScreen: React.FC<QbankScreenProps> = ({ hideHeader = false }) => {
-  const { config, callbacks, getString } = useElearnConfig();
+  const { config, callbacks } = useElearnConfig();
   const theme = useTheme();
 
   const courses = config.courses || [];
@@ -35,20 +37,67 @@ export const QbankScreen: React.FC<QbankScreenProps> = ({ hideHeader = false })
             <Icon name="arrow-left" size={20} color={theme.textPrimary} />
           </TouchableOpacity>
           <Typography variant="h2" bold style={styles.headerTitle}>
-            {getString('qbankTitle')}
+            QBank
           </Typography>
-          <View style={styles.headerRightPlaceholder} />
+          <TouchableOpacity style={styles.searchButton}>
+            <Icon name="search" size={20} color={theme.textPrimary} />
+          </TouchableOpacity>
         </View>
       )}
 
       <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
-        <View style={styles.introSection}>
-          <Typography variant="h1" bold color={theme.textPrimary}>
-            {getString('qbankTitle')}
-          </Typography>
-          <Typography variant="body" color={theme.textSecondary} style={styles.introDesc}>
-            {getString('qbankSubtitle')}
-          </Typography>
+        
+        {/* 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 */}
@@ -56,6 +105,42 @@ export const QbankScreen: React.FC<QbankScreenProps> = ({ hideHeader = false })
           {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}
@@ -63,36 +148,29 @@ export const QbankScreen: React.FC<QbankScreenProps> = ({ hideHeader = false })
                 onPress={() => callbacks.onSelectCourse?.(course)}
                 style={styles.subjectCard}
               >
-                <View style={styles.cardHeader}>
-                  <View style={styles.cardHeaderLeft}>
-                    <View style={[styles.folderIconContainer, { backgroundColor: theme.secondary }]}>
-                      <Icon name="folder" size={22} color={theme.primary} />
-                    </View>
-                    <View style={styles.subjectInfo}>
-                      <Typography variant="h3" bold color={theme.textPrimary}>
-                        {course.title}
-                      </Typography>
+                <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.topics.length} {getString('topicsLabel')}
+                        {course.completedQuestions} / {course.totalQuestions} Modules
+                      </Typography>
+                      <Typography variant="caption" bold color={theme.textPrimary}>
+                        {pct}%
                       </Typography>
                     </View>
                   </View>
-                  <Typography variant="h3" bold color={theme.primary}>
-                    {pct}%
-                  </Typography>
-                </View>
-
-                {/* Progress Details */}
-                <View style={styles.progressSection}>
-                  <ProgressBar progress={course.progress} style={styles.progressBar} />
-                  <View style={styles.progressTextRow}>
-                    <Typography variant="caption" color={theme.textSecondary}>
-                      {getString('questionsCountLabel')}
-                    </Typography>
-                    <Typography variant="caption" bold color={theme.textPrimary}>
-                      {course.completedQuestions}/{course.totalQuestions}
-                    </Typography>
-                  </View>
                 </View>
               </Card>
             );
@@ -112,71 +190,117 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingHorizontal: 20,
+    paddingHorizontal: 16,
     paddingVertical: 12,
   },
   backButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    borderWidth: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    padding: 6,
   },
   headerTitle: {
     fontSize: 18,
+    fontWeight: '700',
   },
-  headerRightPlaceholder: {
-    width: 40,
+  searchButton: {
+    padding: 6,
   },
   scrollContent: {
-    paddingHorizontal: 20,
+    paddingHorizontal: 16,
     paddingBottom: 24,
   },
-  introSection: {
-    marginVertical: 16,
+  premiumCard: {
+    flexDirection: 'row',
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    padding: 16,
+    marginTop: 12,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
   },
-  introDesc: {
-    marginTop: 4,
-    lineHeight: 20,
+  premiumTextContainer: {
+    flex: 1.3,
+    justifyContent: 'center',
   },
-  listContainer: {
-    marginTop: 8,
+  premiumTitle: {
+    fontSize: 15,
+    lineHeight: 19,
+    marginBottom: 4,
   },
-  subjectCard: {
-    padding: 16,
-    marginBottom: 12,
+  premiumSub: {
+    fontSize: 11,
+    lineHeight: 14,
+    marginBottom: 10,
   },
-  cardHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
+  premiumBtn: {
+    alignSelf: 'flex-start',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+  },
+  premiumImageContainer: {
+    flex: 0.7,
+    justifyContent: 'center',
     alignItems: 'center',
   },
-  cardHeaderLeft: {
+  premiumImage: {
+    width: 70,
+    height: 70,
+    borderRadius: 35,
+    backgroundColor: '#E9D5FF', // Light purple
+  },
+  optionsRow: {
     flexDirection: 'row',
-    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginVertical: 16,
+  },
+  optionBtn: {
     flex: 1,
+    alignItems: 'center',
   },
-  folderIconContainer: {
+  optionIconContainer: {
     width: 44,
     height: 44,
+    borderRadius: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 6,
+  },
+  optionLabel: {
+    fontSize: 12,
+  },
+  listContainer: {
+    marginTop: 4,
+  },
+  subjectCard: {
+    padding: 14,
+    marginBottom: 10,
+    borderRadius: 16,
+  },
+  subjectRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  subjectIconBox: {
+    width: 48,
+    height: 48,
     borderRadius: 12,
     justifyContent: 'center',
     alignItems: 'center',
-    marginRight: 12,
+    marginRight: 14,
   },
   subjectInfo: {
     flex: 1,
   },
-  progressSection: {
-    marginTop: 16,
+  subjectTitle: {
+    fontSize: 15,
+    marginBottom: 4,
   },
-  progressBar: {
-    marginBottom: 8,
+  subjectProgressBar: {
+    marginVertical: 4,
   },
-  progressTextRow: {
+  subjectStatsRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
+    marginTop: 2,
   },
 });