Merge branch 'lab-5' of github.com:bounswe/bounswe2024group6 into lab-5

mobile/bulingo/app/(tabs)/_layout.tsx

@@ -36,13 +36,22 @@ export default function TabLayout() {
             tabBarIcon: ({ color }) => <FontAwesome size={28} name="comment" color={color} />,
           }}
         />
+        <Tabs.Screen
+          name="notifications"
+          options={{
+            title: 'Notifications',
+            tabBarIcon: ({ color }) => <FontAwesome size={28} name="bell" color={color} />, // FontAwesome bell icon for notifications
+          }}
+        />
         <Tabs.Screen
           name="profile"
           options={{
             title: 'Profile',
             tabBarIcon: ({ color }) => <FontAwesome size={28} name="user" color={color} />,
           }}
         />
+
+
       </Tabs>
     </>
   );

mobile/bulingo/app/(tabs)/notifications.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { View, Text, FlatList, Image, StyleSheet } from 'react-native';
+
+const notifications = [
+    { id: '1', text: 'Oguz bookmarked your quiz.' },
+    { id: '2', text: 'Halil followed you.' },
+    { id: '3', text: 'Anil followed you.' },
+    { id: '4', text: 'Aras bookmarked your quiz.' },
+    { id: '5', text: 'Oguz followed you.' },
+    { id: '6', text: 'Ozan liked your comment.' },
+    { id: '7', text: 'Sait bookmarked your quiz.' },
+    { id: '8', text: 'Kasap liked your post.' },
+    { id: '9', text: 'Ozan followed you.' },
+    { id: '10', text: 'Kasap followed you.' },
+    { id: '11', text: 'Sait liked your quiz.' },
+    { id: '12', text: 'Ozan bookmarked your post.' },
+    { id: '13', text: 'Kasap liked your recent quiz.' },
+    { id: '14', text: 'Sait followed you.' },
+    { id: '16', text: 'Halil bookmarked your comment.' },
+    { id: '17', text: 'Anil liked your post.' },
+  ];
+
+const NotificationItem = ( {text} : any ) => (
+  <View style={styles.notificationContainer}>
+    <View style={styles.profileInfoTopPictureContainer}>
+      <Image source={require('@/assets/images/profile-icon.png')} style={styles.profileInfoTopPicture} />
+    </View>
+    <Text style={styles.notificationText}>{text}</Text>
+  </View>
+);
+
+const Notifications = () => {
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={notifications}
+        renderItem={({ item }) => <NotificationItem text={item.text} />}
+        keyExtractor={(item) => item.id}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    backgroundColor: '#f0f0f0',
+  },
+  notificationContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'white',
+    padding: 16,
+    marginVertical: 4,
+    borderRadius: 8,
+    elevation: 4,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+  },
+  profileInfoTopPictureContainer: {
+    marginRight: 12,
+  },
+  profileInfoTopPicture: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+  },
+  notificationText: {
+    fontSize: 16,
+    color: '#1a73e8', // Blue for title text
+  },
+});
+
+export default Notifications;

mobile/bulingo/app/pressableText.tsx

@@ -0,0 +1,98 @@
+import React, {useState} from 'react';
+import { View, Pressable, Text, StyleSheet, Modal} from 'react-native';
+
+
+type PressableTextProps = {
+  text: string,
+  getWordInfo: (word: string) => string;
+};
+
+export default function PressableText(props: PressableTextProps){
+  const [selectedWord, setSelectedWord] = useState<string | null>(null);
+  const [modalVisible, setModalVisible] = useState(false);// Function to handle press and show modal
+  const handleLongPress = (word: string) => {
+    setSelectedWord(word);
+    setModalVisible(true);
+  };
+
+  // Function to close modal
+  const closeModal = () => {
+    setModalVisible(false);
+    setSelectedWord(null);
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* Render each word as a Pressable */}
+      {props.text.split(' ').map((word, index) => (
+        <Pressable
+          key={index}
+          onLongPress={() => handleLongPress(word)}
+          style={styles.wordPressable}
+        >
+          <Text style={styles.wordText}>{word} </Text>
+        </Pressable>
+      ))}
+
+      {/* Modal for additional information */}
+      {selectedWord && (
+        <Modal
+          // animationType="slide"
+          transparent={true}
+          visible={modalVisible}
+          onRequestClose={closeModal}
+        >
+          <View style={styles.modalBackground}>
+            <View style={styles.modalContent}>
+              <Text style={styles.modalText}>
+                {props.getWordInfo(selectedWord)}
+              </Text>
+              <Pressable onPress={closeModal} style={styles.closeButton}>
+                <Text style={styles.closeButtonText}>Close</Text>
+              </Pressable>
+            </View>
+          </View>
+        </Modal>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  wordPressable: {
+    margin: 2,
+  },
+  wordText: {
+    fontSize: 16,
+    color: 'blue',
+  },
+  modalBackground: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContent: {
+    backgroundColor: 'white',
+    padding: 20,
+    borderRadius: 10,
+    alignItems: 'center',
+  },
+  modalText: {
+    fontSize: 18,
+    marginBottom: 10,
+  },
+  closeButton: {
+    marginTop: 10,
+    padding: 10,
+    backgroundColor: 'grey',
+    borderRadius: 5,
+  },
+  closeButtonText: {
+    color: 'white',
+  },
+});