General principle continuation

dfm-sideline-sidekick-app/components/ArrayPage.tsx

@@ -0,0 +1,85 @@
+import { Roboto_400Regular, Roboto_700Bold } from "@expo-google-fonts/roboto";
+import { useNavigation } from "@react-navigation/native";
+import { StackNavigationProp } from "@react-navigation/stack";
+import { useFonts } from "expo-font";
+import React from "react";
+import { FlatList, Text, TouchableOpacity, View } from "react-native";
+import Icon from "react-native-vector-icons/FontAwesome";
+
+import styles from "./ArrayPageStyles";
+
+type ContentItem = Record<string, string>;
+
+type Content = {
+  title: string;
+  content: ContentItem;
+};
+
+export type RootStackParamList = {
+  GeneralPrinciples: { titleProp: string; contentProp: Content } | undefined;
+};
+
+type ArrayProps = {
+  arrayProp: Content[];
+  title: string;
+};
+
+const temp = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const ArrayPage: React.FC<ArrayProps> = ({ arrayProp, title }) => {
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
+
+  const [fontsLoaded] = useFonts({
+    "Roboto-Regular": Roboto_400Regular,
+    "Roboto-Bold": Roboto_700Bold,
+  });
+  if (!fontsLoaded) {
+    return <Text>Loading...</Text>;
+  }
+
+  const handleItemPress = (item: Content) => {
+    navigation.navigate("GeneralPrinciples", { titleProp: item.title, contentProp: item });
+  };
+
+  const renderListItem = ({ item, index }: { item: Content; index: number }) => (
+    <TouchableOpacity
+      onPress={() => {
+        handleItemPress(item);
+      }}
+    >
+      <View style={styles.listItemContainer}>
+        <Text style={styles.enumeration}>{index + 1}</Text>
+        <View style={styles.listItemTextContainer}>
+          <Text style={styles.listItemTitle}>{item.title}</Text>
+          <Text style={styles.listItemSubtitle}>{temp}</Text>
+        </View>
+        <Icon name="chevron-right" size={12} color="#909090" />
+      </View>
+    </TouchableOpacity>
+  );
+
+  return (
+    <View>
+      <View style={styles.container}>
+        <TouchableOpacity
+          onPress={() => {
+            navigation.goBack();
+          }}
+          style={styles.backButtonContainer}
+        >
+          <Icon name="chevron-left" size={12} color="#000000" style={styles.backButton} />
+        </TouchableOpacity>
+        <Text style={styles.title}>{title}</Text>
+        <FlatList
+          data={arrayProp}
+          keyExtractor={(item) => item.title}
+          ItemSeparatorComponent={() => <View style={styles.divider} />}
+          renderItem={renderListItem}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default ArrayPage;

dfm-sideline-sidekick-app/components/ArrayPageStyles.tsx

@@ -0,0 +1,54 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    // flex: 1,
+    // padding: 10,
+  },
+  backButtonContainer: {
+    paddingTop: 20,
+    paddingBottom: 20,
+  },
+  backButton: {
+    fontSize: 16,
+  },
+  title: {
+    color: "#182B49",
+    fontSize: 28,
+    fontFamily: "Roboto-Bold",
+    fontWeight: "700",
+    marginBottom: 20,
+    textAlign: "left",
+    paddingTop: 10,
+  },
+  listItemContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+  },
+  enumeration: {
+    marginRight: 8,
+    fontSize: 40,
+    paddingRight: 10,
+  },
+  listItemTextContainer: {
+    flex: 1,
+  },
+  listItemTitle: {
+    fontSize: 18,
+    fontWeight: "500",
+    paddingBottom: 10,
+  },
+  listItemSubtitle: {
+    fontSize: 13,
+    color: "grey",
+  },
+  divider: {
+    height: 1,
+    backgroundColor: "lightgrey",
+    marginVertical: 10,
+    marginRight: 15,
+    marginLeft: 35,
+  },
+});
+export default styles;

dfm-sideline-sidekick-app/components/BulletPoint.tsx

@@ -3,20 +3,17 @@ import { Text, View } from "react-native";
 
 import styles from "./BulletPointStyles";
 
-type Subpoint = {
-  text: string;
-  subpoints?: Subpoint[];
-};
+type ContentItem = Record<string, string>;
 
 type BulletPointProps = {
-  letter: string;
-  text: string;
-  subpoints?: Subpoint[];
+  content: ContentItem;
 };
 
-const BulletPoint: React.FC<BulletPointProps> = ({ letter, text, subpoints: initSubpoints }) => {
+const BulletPoint: React.FC<BulletPointProps> = ({ content }) => {
   // render subpoints recursively
-  const renderSubpoints = (subpoints: Subpoint[], level = 0) => {
+  const renderSubpoints = (subpointsString: string, level = 0) => {
+    const subpoints = subpointsString.split("\n");
+
     const markers = [
       ["1", "2", "3"], // Level 0 markers
       ["a", "b", "c"], // Level 1 markers
@@ -30,25 +27,45 @@ const BulletPoint: React.FC<BulletPointProps> = ({ letter, text, subpoints: init
       <View key={`${level}-${index}`} style={{ paddingLeft: level * 20 }}>
         <Text style={styles.point}>
           {`${currentMarkers[index % currentMarkers.length]}. `}
-          {subpoint.text}
+          {subpoint}
         </Text>
-        {subpoint.subpoints && (
+        {/* {subpoint.subpoints && (
           <View style={{ paddingLeft: 20 }}>{renderSubpoints(subpoint.subpoints, level + 1)}</View>
-        )}
+        )} */}
       </View>
     ));
   };
 
   return (
     <View>
-      <View style={styles.container}>
-        <View style={styles.circle}>
-          <Text style={styles.circleCaption}>{letter}</Text>
+      {Object.entries(content).map(([key, value], index) => (
+        <View key={key}>
+          <View style={styles.container}>
+            <View style={styles.circle}>
+              <Text style={styles.circleCaption}>{String.fromCharCode(65 + index)}</Text>
+            </View>
+            <Text style={styles.mainText}>{key}</Text>
+          </View>
+          <View style={styles.subpoints}>{value && renderSubpoints(value)}</View>
         </View>
-        <Text style={styles.mainText}>{text}</Text>
-      </View>
-      <View style={styles.subpoints}>{initSubpoints && renderSubpoints(initSubpoints)}</View>
+      ))}
     </View>
+    // <View>
+    //   {Object.entries(content).map(([key, value]) => (
+    //     <View key={key}>
+    //       <Text style={{ fontWeight: 'bold' }}>{key}</Text>
+    //       <Text>{value}</Text>
+    //     </View>
+    //   ))}
+
+    //     <View style={styles.container}>
+    //       <View style={styles.circle}>
+    //         <Text style={styles.circleCaption}>{letter}</Text>
+    //       </View>
+    //       <Text style={styles.mainText}>{text}</Text>
+    //     </View>
+    //     <View style={styles.subpoints}>{initSubpoints && renderSubpoints(initSubpoints)}</View>
+    // </View>
   );
 };
 

dfm-sideline-sidekick-app/components/BulletPointStyles.tsx

@@ -25,7 +25,8 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontFamily: "Roboto-Bold",
     fontWeight: "700",
-    paddingLeft: 5,
+    paddingLeft: 7,
+    paddingRight: 27,
   },
   subpoints: {
     paddingTop: 5,