react-native-elearn-ui 0.1.5 → 0.1.7

package/src/screens/QuizStartScreen.tsx

@@ -19,12 +19,11 @@ interface QuizStartScreenProps {
 }
 
 export const QuizStartScreen: React.FC<QuizStartScreenProps> = ({
-  course,
   topic,
   onBack,
   hideHeader = false,
 }) => {
-  const { callbacks, getString } = useElearnConfig();
+  const { callbacks } = useElearnConfig();
   const theme = useTheme();
 
   const handleStart = () => {
@@ -33,11 +32,15 @@ export const QuizStartScreen: React.FC<QuizStartScreenProps> = ({
     }
   };
 
-  const infoItems = [
-    'Immediate explanation display',
-    'Interactive choice evaluation',
-    'Self-paced learning structure',
-    'Detailed performance scorecard',
+  // Mock list of glance topics matching mockup 3
+  const glanceTopics = [
+    'Cerebral Cortex',
+    'Cranial Nerves',
+    'Spinal Cord Tracts',
+    'Brainstem Anatomy',
+    'Basal Ganglia',
+    'Thalamus and Hypothalamus',
+    'Visual and Auditory Pathways',
   ];
 
   return (
@@ -47,75 +50,75 @@ export const QuizStartScreen: React.FC<QuizStartScreenProps> = ({
       {/* Header */}
       {!hideHeader && (
         <View style={styles.header}>
-          <TouchableOpacity
-            onPress={onBack}
-            style={[styles.backButton, { borderColor: theme.border }]}
-          >
+          <TouchableOpacity onPress={onBack} style={styles.backButton}>
             <Icon name="arrow-left" size={20} color={theme.textPrimary} />
           </TouchableOpacity>
-          <Typography variant="h3" bold style={styles.headerTitle} numberOfLines={1}>
-            {course.title}
+          <Typography variant="h2" bold style={styles.headerTitle}>
+            QBank
           </Typography>
-          <View style={styles.headerRightPlaceholder} />
+          <TouchableOpacity style={styles.shareButton}>
+            <Icon name="share" size={20} color={theme.textPrimary} />
+          </TouchableOpacity>
         </View>
       )}
 
       <View style={styles.container}>
         <View style={styles.content}>
           
-          {/* Main Info Card */}
-          <Card bordered style={styles.mainCard}>
-            <View style={[styles.badge, { backgroundColor: theme.secondary }]}>
-              <Typography variant="caption" color={theme.primary} bold>
-                {course.title.toUpperCase()}
-              </Typography>
-            </View>
-            <Typography variant="h1" bold style={styles.title}>
-              {topic.title}
-            </Typography>
-            <Typography variant="body" color={theme.textSecondary} style={styles.desc}>
-              Practice questions to master this topic. Dynamic evaluation will track your correctness and accuracy instantly.
-            </Typography>
-            
-            <View style={styles.questionsStatsRow}>
-              <Icon name="book-open" size={20} color={theme.primary} />
-              <Typography variant="body" bold style={styles.statsText}>
-                {topic.totalQuestions} Questions Available
-              </Typography>
+          {/* Section Category Title */}
+          <Typography variant="h1" bold color={theme.textPrimary} style={styles.categoryTitle}>
+            {topic.category || 'Neuro Anatomy'}
+          </Typography>
+
+          {/* Main Info Box */}
+          <Card bordered style={styles.infoCard}>
+            <View style={styles.topicHeaderRow}>
+              {/* Left Circle Icon */}
+              <View style={[styles.iconCircle, { backgroundColor: 'rgba(59, 130, 246, 0.1)' }]}>
+                <Icon name="file-text" size={20} color="#3B82F6" />
+              </View>
+              {/* Right details */}
+              <View style={styles.topicHeaderDetails}>
+                <Typography variant="h2" bold color={theme.textPrimary} style={styles.topicMainTitle}>
+                  {topic.title}
+                </Typography>
+                <Typography variant="caption" color={theme.textSecondary}>
+                  {topic.totalQuestions} Questions
+                </Typography>
+              </View>
             </View>
+
+            {/* Launch Button inside the card box */}
+            <Button
+              title="Start QBank"
+              onPress={handleStart}
+              variant="primary"
+              style={[styles.startButton, { backgroundColor: theme.primary }]}
+              disabled={!topic.questions || topic.questions.length === 0}
+            />
           </Card>
 
-          {/* Guidelines / Info Section */}
-          <View style={styles.infoSection}>
-            <Typography variant="h2" bold style={styles.infoTitle}>
-              {getString('topicsAndItemsLabel')}
+          {/* Glance Topics list */}
+          <View style={styles.glanceSection}>
+            <Typography variant="h2" bold color={theme.textPrimary} style={styles.glanceTitle}>
+              Topics at a Glance
+            </Typography>
+            <Typography variant="body" color={theme.textSecondary} style={styles.glanceSub}>
+              It's recommended that you thoroughly study these topics prior to attempting the QBank.
             </Typography>
-            
-            <View style={styles.guidelinesList}>
-              {infoItems.map((item, idx) => (
-                <View key={idx} style={styles.infoItemRow}>
-                  <View style={styles.bulletContainer}>
-                    <Icon name="check-circle" size={18} color={theme.primary} />
-                  </View>
-                  <Typography variant="body" color={theme.textSecondary} style={styles.infoItemText}>
+
+            <View style={styles.bulletList}>
+              {glanceTopics.map((item, idx) => (
+                <View key={idx} style={styles.bulletRow}>
+                  <View style={[styles.bulletDot, { backgroundColor: theme.primary }]} />
+                  <Typography variant="body" color={theme.textPrimary} style={styles.bulletText}>
                     {item}
                   </Typography>
                 </View>
               ))}
             </View>
           </View>
-          
-        </View>
 
-        {/* Footer Launch Button */}
-        <View style={[styles.footer, { backgroundColor: theme.cardBackground, borderTopColor: theme.border }]}>
-          <Button
-            title={getString('startQuizButton')}
-            onPress={handleStart}
-            variant="primary"
-            style={styles.startButton}
-            disabled={!topic.questions || topic.questions.length === 0}
-          />
         </View>
       </View>
     </SafeAreaView>
@@ -130,90 +133,93 @@ 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: {
-    flex: 1,
-    textAlign: 'center',
-    marginHorizontal: 12,
+    fontSize: 18,
+    fontWeight: '700',
   },
-  headerRightPlaceholder: {
-    width: 40,
+  shareButton: {
+    padding: 6,
   },
   container: {
     flex: 1,
-    justifyContent: 'space-between',
   },
   content: {
     flex: 1,
-    paddingHorizontal: 20,
+    paddingHorizontal: 16,
     paddingTop: 12,
   },
-  mainCard: {
-    padding: 24,
-    borderRadius: 20,
-  },
-  badge: {
-    alignSelf: 'flex-start',
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: 8,
-    marginBottom: 12,
-  },
-  title: {
+  categoryTitle: {
     fontSize: 22,
-    lineHeight: 28,
-    marginBottom: 8,
-  },
-  desc: {
-    lineHeight: 20,
     marginBottom: 16,
   },
-  questionsStatsRow: {
+  infoCard: {
+    padding: 16,
+    borderRadius: 16,
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+  },
+  topicHeaderRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginTop: 8,
+    marginBottom: 16,
   },
-  statsText: {
-    marginLeft: 8,
+  iconCircle: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
   },
-  infoSection: {
-    marginTop: 28,
+  topicHeaderDetails: {
+    flex: 1,
   },
-  infoTitle: {
-    marginBottom: 16,
+  topicMainTitle: {
+    fontSize: 15,
+    lineHeight: 19,
+    marginBottom: 2,
   },
-  guidelinesList: {
-    marginTop: 4,
+  startButton: {
+    width: '100%',
+    height: 46,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 10,
   },
-  infoItemRow: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    marginBottom: 14,
+  glanceSection: {
+    marginTop: 24,
   },
-  bulletContainer: {
-    marginTop: 1,
+  glanceTitle: {
+    fontSize: 16,
+    marginBottom: 6,
   },
-  infoItemText: {
-    marginLeft: 12,
-    flex: 1,
+  glanceSub: {
+    fontSize: 13,
     lineHeight: 18,
+    marginBottom: 16,
   },
-  footer: {
-    paddingHorizontal: 20,
-    paddingVertical: 16,
-    borderTopWidth: 1,
+  bulletList: {
+    marginTop: 4,
   },
-  startButton: {
-    width: '100%',
+  bulletRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  bulletDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    marginRight: 12,
+  },
+  bulletText: {
+    fontSize: 14,
   },
 });