Merge pull request #10 from TritonSE/general-principles-page

General principles page

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { Text, View } from "react-native";
+
+import styles from "./BulletPointStyles";
+
+type Subpoint = {
+  text: string;
+  subpoints?: Subpoint[];
+};
+
+type BulletPointProps = {
+  letter: string;
+  text: string;
+  subpoints?: Subpoint[];
+};
+
+const BulletPoint: React.FC<BulletPointProps> = ({ letter, text, subpoints: initSubpoints }) => {
+  // render subpoints recursively
+  const renderSubpoints = (subpoints: Subpoint[], level = 0) => {
+    const markers = [
+      ["1", "2", "3"], // Level 0 markers
+      ["a", "b", "c"], // Level 1 markers
+      ["i", "ii", "iii"], // Level 2 markers
+    ];
+
+    // ensure the level has defined markers, if not, default to numeric
+    const currentMarkers = markers[level] || markers[0];
+
+    return subpoints.map((subpoint, index) => (
+      <View key={`${level}-${index}`} style={{ paddingLeft: level * 20 }}>
+        <Text style={styles.point}>
+          {`${currentMarkers[index % currentMarkers.length]}. `}
+          {subpoint.text}
+        </Text>
+        {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>
+        </View>
+        <Text style={styles.mainText}>{text}</Text>
+      </View>
+      <View style={styles.subpoints}>{initSubpoints && renderSubpoints(initSubpoints)}</View>
+    </View>
+  );
+};
+
+export default BulletPoint;

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

@@ -0,0 +1,42 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingTop: 15,
+  },
+  circle: {
+    width: 24, // this should be a "props"-value in future
+    height: 24, // this should be a "props"-value in future
+    borderRadius: 24 / 2,
+    backgroundColor: "#00629B",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  circleCaption: {
+    fontSize: 14,
+    color: "white",
+    fontWeight: "600",
+  },
+  mainText: {
+    color: "black",
+    fontSize: 16,
+    fontFamily: "Roboto-Bold",
+    fontWeight: "700",
+    paddingLeft: 5,
+  },
+  subpoints: {
+    paddingTop: 5,
+    paddingLeft: 38,
+    paddingRight: 25,
+    fontFamily: "Roboto-Regular",
+  },
+  point: {
+    fontSize: 15,
+    fontFamily: "Roboto-Regular",
+  },
+});
+
+export default styles;