react-native-elearn-ui 0.1.4 → 0.1.6

package/src/screens/QbankScreen.tsx

@@ -6,13 +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';
 
-export const QbankScreen: React.FC = () => {
-  const { config, callbacks, getString } = useElearnConfig();
+interface QbankScreenProps {
+  hideHeader?: boolean;
+}
+
+export const QbankScreen: React.FC<QbankScreenProps> = ({ hideHeader = false }) => {
+  const { config, callbacks } = useElearnConfig();
   const theme = useTheme();
 
   const courses = config.courses || [];
@@ -22,27 +28,76 @@ export const QbankScreen: React.FC = () => {
       <StatusBar barStyle="dark-content" />
       
       {/* Header */}
-      <View style={styles.header}>
-        <TouchableOpacity
-          onPress={() => callbacks.onBackToDashboard?.()}
-          style={[styles.backButton, { borderColor: theme.border }]}
-        >
-          <Icon name="arrow-left" size={20} color={theme.textPrimary} />
-        </TouchableOpacity>
-        <Typography variant="h2" bold style={styles.headerTitle}>
-          {getString('qbankTitle')}
-        </Typography>
-        <View style={styles.headerRightPlaceholder} />
-      </View>
+      {!hideHeader && (
+        <View style={styles.header}>
+          <TouchableOpacity
+            onPress={() => callbacks.onBackToDashboard?.()}
+            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}>
-        <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 */}
@@ -50,6 +105,42 @@ export const QbankScreen: React.FC = () => {
           {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}
@@ -57,36 +148,29 @@ export const QbankScreen: React.FC = () => {
                 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>
             );
@@ -106,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,
   },
 });