react-native-elearn-ui 0.1.42 → 0.1.43

package/src/screens/notes/NotesSubTopicScreen.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useTheme } from '../../context/ThemeContext';
+import { Typography, Icon } from '../../components';
+import type { NotesSubTopicScreenProps, NotesSubTopicSection } from '../../types';
+
+export const NotesSubTopicScreen: React.FC<NotesSubTopicScreenProps> = ({
+  topicTitle,
+  sections,
+  onBack,
+  onPressFilter,
+  onPressSubTopic,
+}) => {
+  const theme = useTheme();
+
+  return (
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: '#F9FAFB' }]} edges={['top', 'bottom']}>
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity style={styles.headerBtnLeft} onPress={onBack}>
+          <Icon name="chevron-left" size={24} color={theme.textPrimary} />
+        </TouchableOpacity>
+        <Typography variant="h2" bold color={theme.textPrimary} style={styles.headerTitle}>
+          {topicTitle}
+        </Typography>
+        <TouchableOpacity style={styles.headerBtnRight} onPress={onPressFilter}>
+          <Icon name="filter" size={20} color={theme.textPrimary} />
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        {sections && sections.map((section: NotesSubTopicSection) => (
+          <View key={section.id} style={styles.sectionContainer}>
+            <View style={styles.sectionHeader}>
+              <View style={[styles.dot, { backgroundColor: theme.success }]} />
+              <Typography variant="caption" color={theme.textSecondary} style={styles.sectionTitle}>
+                {section.title}
+              </Typography>
+            </View>
+
+            {section.subTopics.map((subTopic) => (
+              <TouchableOpacity
+                key={subTopic.id}
+                style={styles.subTopicCard}
+                activeOpacity={0.8}
+                onPress={() => onPressSubTopic?.(subTopic.id)}
+              >
+                <View style={styles.subTopicLeft}>
+                  <Typography variant="body" color={theme.textPrimary} style={styles.subTopicTitle}>
+                    {subTopic.title}
+                  </Typography>
+                </View>
+                <View style={styles.subTopicRight}>
+                  {subTopic.isLocked && (
+                    <View style={styles.lockIconContainer}>
+                      <Icon name="lock" size={14} color="#94A3B8" />
+                    </View>
+                  )}
+                </View>
+              </TouchableOpacity>
+            ))}
+          </View>
+        ))}
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#F1F5F9',
+  },
+  headerBtnLeft: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  headerBtnRight: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  headerTitle: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 18,
+  },
+  scrollContent: {
+    padding: 16,
+    paddingBottom: 40,
+  },
+  sectionContainer: {
+    marginBottom: 24,
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    marginRight: 8,
+  },
+  sectionTitle: {
+    fontSize: 12,
+    letterSpacing: 0.5,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+  },
+  subTopicCard: {
+    backgroundColor: '#FFFFFF',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    borderRadius: 12,
+    marginBottom: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+    borderWidth: 1,
+    borderColor: '#F1F5F9',
+  },
+  subTopicLeft: {
+    flex: 1,
+    paddingRight: 12,
+  },
+  subTopicTitle: {
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 20,
+  },
+  subTopicRight: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  lockIconContainer: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: '#F1F5F9',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/screens/notes/NotesTopicScreen.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useTheme } from '../../context/ThemeContext';
+import { Typography, Icon } from '../../components';
+import type { NotesTopicScreenProps, NotesTopic } from '../../types';
+
+export const NotesTopicScreen: React.FC<NotesTopicScreenProps> = ({
+  title = 'BNS/MD',
+  recentlyAdded,
+  allTopics,
+  onBack,
+  onPressSearch,
+  onPressTopic,
+}) => {
+  const theme = useTheme();
+
+  const renderTopicCard = (item: NotesTopic, isRecentlyAdded: boolean) => (
+    <TouchableOpacity
+      key={item.id}
+      style={styles.topicCard}
+      activeOpacity={0.8}
+      onPress={() => onPressTopic?.(item.id)}
+    >
+      <View style={styles.topicCardLeft}>
+        <View style={styles.iconContainer}>
+          <Icon name="file-text" size={20} color={theme.primary} />
+        </View>
+        <Typography variant="h3" color={theme.textPrimary} style={styles.topicTitle}>
+          {item.title}
+        </Typography>
+      </View>
+      <View style={styles.topicCardRight}>
+        {isRecentlyAdded && item.isCompleted ? (
+          <Icon name="check" size={20} color={theme.success} />
+        ) : (
+          <Icon name="chevron-right" size={20} color={theme.textSecondary} />
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+
+  return (
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: '#F9FAFB' }]} edges={['top', 'bottom']}>
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity style={styles.headerBtnLeft} onPress={onBack}>
+          <Icon name="chevron-left" size={24} color={theme.textPrimary} />
+        </TouchableOpacity>
+        <Typography variant="h2" bold color={theme.textPrimary} style={styles.headerTitle}>
+          {title}
+        </Typography>
+        <TouchableOpacity style={styles.headerBtnRight} onPress={onPressSearch}>
+          <Icon name="search" size={22} color={theme.textPrimary} />
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        {/* Recently Added Section */}
+        {recentlyAdded && recentlyAdded.length > 0 && (
+          <View style={styles.section}>
+            <Typography variant="caption" color={theme.textSecondary} style={styles.sectionHeader}>
+              RECENTLY ADDED
+            </Typography>
+            {recentlyAdded.map((topic) => renderTopicCard(topic, true))}
+          </View>
+        )}
+
+        {/* All Topics Section */}
+        {allTopics && allTopics.length > 0 && (
+          <View style={[styles.section, { marginTop: 24 }]}>
+            <Typography variant="caption" color={theme.textSecondary} style={styles.sectionHeader}>
+              ALL TOPICS
+            </Typography>
+            {allTopics.map((topic) => renderTopicCard(topic, false))}
+          </View>
+        )}
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#F1F5F9',
+  },
+  headerBtnLeft: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  headerBtnRight: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  headerTitle: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 18,
+  },
+  scrollContent: {
+    padding: 16,
+    paddingBottom: 40,
+  },
+  section: {
+    width: '100%',
+  },
+  sectionHeader: {
+    fontSize: 12,
+    letterSpacing: 0.5,
+    marginBottom: 12,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+  },
+  topicCard: {
+    backgroundColor: '#FFFFFF',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    borderRadius: 12,
+    marginBottom: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+    borderWidth: 1,
+    borderColor: '#F1F5F9',
+  },
+  topicCardLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 8,
+    backgroundColor: '#F8FAFC',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 16,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+  },
+  topicTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  topicCardRight: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/screens/notes/index.ts

@@ -0,0 +1,3 @@
+export * from './NotesTopicScreen';
+export * from './NotesSubTopicScreen';
+export * from './NotesDetailScreen';

package/src/types/index.ts

@@ -304,3 +304,64 @@ export interface QBankSubTopicParams {
   };
   sections: QBankSubTopicSection[];
 }
+
+// --------------------------------------------------
+// Notes Module Types
+// --------------------------------------------------
+
+export interface NotesTopic {
+  id: string;
+  title: string;
+  icon?: string;
+  isCompleted?: boolean;
+}
+
+export interface NotesTopicScreenProps {
+  title?: string;
+  recentlyAdded: NotesTopic[];
+  allTopics: NotesTopic[];
+  onBack?: () => void;
+  onPressSearch?: () => void;
+  onPressTopic?: (topicId: string) => void;
+}
+
+export interface NotesSubTopic {
+  id: string;
+  title: string; 
+  isLocked?: boolean;
+}
+
+export interface NotesSubTopicSection {
+  id: string;
+  title: string; 
+  subTopics: NotesSubTopic[];
+}
+
+export interface NotesSubTopicScreenProps {
+  topicTitle: string; 
+  sections: NotesSubTopicSection[];
+  onBack?: () => void;
+  onPressFilter?: () => void;
+  onPressSubTopic?: (subTopicId: string) => void;
+}
+
+export interface NotesDetailContent {
+  title: string;
+  description: string;
+}
+
+export interface NotesDetailScreenProps {
+  topicTitle: string;
+  sectionTitle: string;
+  currentProgress: number;
+  totalProgress: number;
+  subTopicTitle: string;
+  content: NotesDetailContent[];
+  isCompleted?: boolean;
+  onBack?: () => void;
+  onPressGroup?: () => void;
+  onToggleComplete?: (isComplete: boolean) => void;
+  onPressPrev?: () => void;
+  onPressNext?: () => void;
+}
+