react-native-elearn-ui 0.1.0

package/src/screens/HomeScreen.tsx

@@ -0,0 +1,291 @@
+import React from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  SafeAreaView,
+  StatusBar,
+  Image,
+} from 'react-native';
+import { useElearnConfig } from '../context/ElearnConfigContext';
+import { useTheme } from '../context/ThemeContext';
+import { Typography, Card, CircularProgress, Icon } from '../components';
+
+export const HomeScreen: React.FC = () => {
+  const { config, callbacks, getString } = useElearnConfig();
+  const theme = useTheme();
+
+  const dailyQuiz = config.dailyQuiz;
+  const courses = config.courses || [];
+
+  const handleDailyQuizPress = () => {
+    if (dailyQuiz && callbacks.onStartQuiz) {
+      callbacks.onStartQuiz(
+        dailyQuiz.id,
+        dailyQuiz.questions,
+        dailyQuiz.title
+      );
+    }
+  };
+
+  return (
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
+      <StatusBar barStyle="dark-content" />
+      
+      {/* Header */}
+      <View style={styles.header}>
+        <View style={styles.headerLeft}>
+          <TouchableOpacity style={styles.avatarContainer}>
+            <View style={[styles.avatarPlaceholder, { backgroundColor: theme.secondary }]}>
+              <Icon name="user" size={20} color={theme.primary} />
+            </View>
+          </TouchableOpacity>
+          <View>
+            <Typography variant="bodyLight" color={theme.textSecondary}>
+              {getString('homeHeaderTitle')}
+            </Typography>
+            <Typography variant="h2" bold>
+              Dr. Kimberly
+            </Typography>
+          </View>
+        </View>
+        <TouchableOpacity style={[styles.iconButton, { borderColor: theme.border }]}>
+          <Icon name="bell" size={20} color={theme.textPrimary} />
+          <View style={[styles.badge, { backgroundColor: theme.danger }]} />
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        
+        {/* Daily Quiz Card */}
+        {dailyQuiz && (
+          <TouchableOpacity activeOpacity={0.9} onPress={handleDailyQuizPress}>
+            <Card style={[styles.dailyQuizCard, { backgroundColor: '#0284C7' }]}>
+              <View style={styles.dailyQuizRow}>
+                <View style={styles.dailyQuizLeft}>
+                  <Typography variant="h3" color="#FFFFFF" bold>
+                    {getString('dailyQuizTitle')}
+                  </Typography>
+                  <Typography variant="caption" color="#E0F2FE" style={styles.dailyQuizDesc}>
+                    {getString('dailyQuizSubtitle')}
+                  </Typography>
+                  <View style={styles.trackQuickBadge}>
+                    <Typography variant="caption" color="#0284C7" bold>
+                      {getString('trackQuickLabel')}
+                    </Typography>
+                  </View>
+                </View>
+                
+                <View style={styles.dailyQuizRight}>
+                  <CircularProgress
+                    progress={dailyQuiz.progressPercentage / 100}
+                    size={68}
+                    strokeWidth={6}
+                    color="#FFFFFF"
+                    backgroundColor="rgba(255, 255, 255, 0.25)"
+                    textStyle={{ color: '#FFFFFF', fontSize: 13 }}
+                  />
+                </View>
+              </View>
+            </Card>
+          </TouchableOpacity>
+        )}
+
+        {/* Subjects Tabs */}
+        <View style={styles.sectionHeader}>
+          <Typography variant="h2" bold>
+            {getString('subjectsTitle')}
+          </Typography>
+        </View>
+
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.subjectsContainer}>
+          {courses.map((course) => {
+            let iconName: any = 'flask';
+            if (course.title.toLowerCase().includes('physic')) iconName = 'atom';
+            if (course.title.toLowerCase().includes('biolog')) iconName = 'dna';
+            if (course.title.toLowerCase().includes('anatom')) iconName = 'book-open';
+
+            return (
+              <TouchableOpacity
+                key={course.id}
+                style={[
+                  styles.subjectTab,
+                  { backgroundColor: theme.cardBackground, borderColor: theme.border },
+                ]}
+                onPress={() => callbacks.onSelectCourse?.(course)}
+              >
+                <View style={[styles.subjectIconWrap, { backgroundColor: theme.secondary }]}>
+                  <Icon name={iconName} size={20} color={theme.primary} />
+                </View>
+                <Typography variant="label" bold style={styles.subjectText}>
+                  {course.title}
+                </Typography>
+              </TouchableOpacity>
+            );
+          })}
+        </ScrollView>
+
+        {/* Popular Topics Section */}
+        <View style={styles.sectionHeader}>
+          <Typography variant="h2" bold>
+            {getString('popularTopicsTitle')}
+          </Typography>
+        </View>
+
+        {/* Mocking a beautiful content card as shown in the UI mockup */}
+        <Card bordered style={styles.infoCard}>
+          <Image
+            source={{ uri: 'https://images.unsplash.com/photo-1576086213369-97a306d36557?q=80&w=600&auto=format&fit=crop' }}
+            style={styles.infoCardImage}
+            resizeMode="cover"
+          />
+          <View style={styles.infoCardContent}>
+            <View style={styles.infoCardHeader}>
+              <Typography variant="caption" color={theme.primary} bold>
+                HISTOLOGY
+              </Typography>
+              <Typography variant="caption" color={theme.textSecondary}>
+                12 min read
+              </Typography>
+            </View>
+            <Typography variant="h3" bold style={styles.infoCardTitle}>
+              Tissue structures under microscope examination
+            </Typography>
+            <Typography variant="body" color={theme.textSecondary} numberOfLines={2}>
+              Learn the identification of epithelial tissues, connective tissues, and muscle structures for medical examination prep.
+            </Typography>
+          </View>
+        </Card>
+
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+  },
+  headerLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  avatarContainer: {
+    marginRight: 12,
+  },
+  avatarPlaceholder: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  badge: {
+    position: 'absolute',
+    top: 10,
+    right: 10,
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+  scrollContent: {
+    paddingHorizontal: 20,
+    paddingBottom: 24,
+  },
+  dailyQuizCard: {
+    marginVertical: 12,
+    padding: 20,
+    borderRadius: 20,
+  },
+  dailyQuizRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  dailyQuizLeft: {
+    flex: 1,
+    paddingRight: 16,
+  },
+  dailyQuizDesc: {
+    marginTop: 6,
+    opacity: 0.9,
+  },
+  trackQuickBadge: {
+    backgroundColor: '#FFFFFF',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16,
+    alignSelf: 'flex-start',
+    marginTop: 14,
+  },
+  dailyQuizRight: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  sectionHeader: {
+    marginTop: 20,
+    marginBottom: 12,
+  },
+  subjectsContainer: {
+    paddingVertical: 4,
+  },
+  subjectTab: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 20,
+    borderWidth: 1,
+    marginRight: 12,
+  },
+  subjectIconWrap: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 8,
+  },
+  subjectText: {
+    fontSize: 14,
+  },
+  infoCard: {
+    padding: 0,
+    overflow: 'hidden',
+    marginTop: 8,
+  },
+  infoCardImage: {
+    width: '100%',
+    height: 160,
+  },
+  infoCardContent: {
+    padding: 16,
+  },
+  infoCardHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 6,
+  },
+  infoCardTitle: {
+    marginBottom: 8,
+    lineHeight: 22,
+  },
+});

package/src/screens/QbankScreen.tsx

@@ -0,0 +1,176 @@
+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, ProgressBar, Icon } from '../components';
+
+export const QbankScreen: React.FC = () => {
+  const { config, callbacks, getString } = useElearnConfig();
+  const theme = useTheme();
+
+  const courses = config.courses || [];
+
+  return (
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
+      <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>
+
+      <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>
+        </View>
+
+        {/* Subjects List */}
+        <View style={styles.listContainer}>
+          {courses.map((course) => {
+            const pct = Math.round(course.progress * 100);
+            
+            return (
+              <Card
+                key={course.id}
+                bordered
+                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>
+                      <Typography variant="caption" color={theme.textSecondary}>
+                        {course.topics.length} {getString('topicsLabel')}
+                      </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>
+            );
+          })}
+        </View>
+
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  headerTitle: {
+    fontSize: 18,
+  },
+  headerRightPlaceholder: {
+    width: 40,
+  },
+  scrollContent: {
+    paddingHorizontal: 20,
+    paddingBottom: 24,
+  },
+  introSection: {
+    marginVertical: 16,
+  },
+  introDesc: {
+    marginTop: 4,
+    lineHeight: 20,
+  },
+  listContainer: {
+    marginTop: 8,
+  },
+  subjectCard: {
+    padding: 16,
+    marginBottom: 12,
+  },
+  cardHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  cardHeaderLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  folderIconContainer: {
+    width: 44,
+    height: 44,
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+  },
+  subjectInfo: {
+    flex: 1,
+  },
+  progressSection: {
+    marginTop: 16,
+  },
+  progressBar: {
+    marginBottom: 8,
+  },
+  progressTextRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+});