General principles main view

dfm-sideline-sidekick-app/App.tsx

@@ -11,12 +11,13 @@ import { checkConnection } from "./download/connection/checkConnection";
 import { downloadJSON } from "./download/downloadFromAPI";
 import BookmarkPage from "./pages/BookmarkPage";
 import SearchPage from "./pages/SearchPage";
-import TabPage from "./pages/TabPage";
+// import TabPage from "./pages/TabPage";
+import GeneralPrinciplesMain from "./pages/generalPrinciplesMain";
 
 type RootStackParamList = {
   Bookmark: undefined;
   Search: undefined;
-  Tab: undefined;
+  GPM: undefined;
 };
 
 type StackNavigation = StackNavigationProp<RootStackParamList>;
@@ -44,7 +45,7 @@ const BottomNavBarComponent = () => {
       id: 3,
       icon: "principles",
       onClick: () => {
-        navigation.navigate("Tab");
+        navigation.navigate("GPM");
       },
     },
   ];
@@ -85,7 +86,11 @@ export default function App() {
       <Stack.Navigator initialRouteName="Search">
         <Stack.Screen name="Bookmark" component={BookmarkPage} options={{ headerShown: false }} />
         <Stack.Screen name="Search" component={SearchPage} options={{ headerShown: false }} />
-        <Stack.Screen name="Tab" component={TabPage} options={{ headerShown: false }} />
+        <Stack.Screen
+          name="GPM"
+          component={GeneralPrinciplesMain}
+          options={{ headerShown: false }}
+        />
       </Stack.Navigator>
       <BottomNavBarComponent />
       <StatusBar style="auto" />

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

@@ -26,7 +26,6 @@ type ArrayProps = {
 
 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>>();
 

dfm-sideline-sidekick-app/pages/GlobalSearch.tsx

@@ -12,6 +12,10 @@ type Document = {
   subtitle: string;
 };
 
+type Props = {
+  title: string;
+};
+
 const documents: Document[] = [
   {
     id: "1",
@@ -30,7 +34,8 @@ const documents: Document[] = [
   },
 ];
 
-const SearchBarComponent = () => {
+// eslint-disable-next-line react/prop-types
+const SearchBarComponent: React.FC<Props> = ({ title }) => {
   const [query, setQuery] = useState("");
   const [filteredDocuments, setFilteredDocuments] = useState<Document[]>([]);
 
@@ -71,7 +76,7 @@ const SearchBarComponent = () => {
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>Global Search</Text>
+      <Text style={styles.title}>{title}</Text>
       <View style={styles.searchContainer}>
         <View style={styles.searchSection}>
           <Icon name="search" size={13} color="gray" style={styles.searchIcon} />

dfm-sideline-sidekick-app/pages/GlobalSearchStyles.tsx

@@ -1,20 +1,23 @@
-import { StyleSheet } from "react-native";
+import { Dimensions, StyleSheet } from "react-native";
+
+const { width, height } = Dimensions.get("window");
+const minDimension = Math.min(width, height);
 
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: 17.5,
-    paddingTop: 50,
+    paddingHorizontal: width * 0.05, // 5% of screen width/height
+    paddingTop: height * 0.05, // 5% of screen width/height
   },
   listItemContainer: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingVertical: 10,
-    paddingHorizontal: 15,
+    paddingVertical: height * 0.015, // 1.5% of screen width/height
+    paddingHorizontal: width * 0.04, // 4% of screen width/height
   },
   cancelButton: {
-    paddingLeft: 10,
-    marginBottom: 8,
+    paddingLeft: width * 0.02, // 2% of screen width/height
+    marginBottom: height * 0.008, // 0.8% of screen width/height
     justifyContent: "center",
     alignItems: "center",
     overflow: "visible",
@@ -23,28 +26,28 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   listItemTitle: {
-    fontSize: 18,
+    fontSize: minDimension * 0.06, // 6% of screen width/height
     fontWeight: "500",
-    paddingBottom: 10,
+    paddingBottom: height * 0.012, // 1.2% of screen width/height
   },
   listItemSubtitle: {
-    fontSize: 13,
+    fontSize: minDimension * 0.035, // 3.5% of screen width/height
     color: "grey",
   },
   divider: {
     height: 1,
     backgroundColor: "lightgrey",
-    marginHorizontal: 15,
-    marginVertical: 10,
+    marginHorizontal: width * 0.04, // 4% of screen width/height
+    marginVertical: height * 0.01, // 1% of screen width/height
   },
   title: {
     color: "#182B49",
-    fontSize: 28,
-    fontFamily: "Roboto",
+    fontSize: minDimension * 0.1, // 10% of screen width/height
     fontWeight: "700",
-    marginBottom: 20,
+    marginBottom: height * 0.02, // 2% of screen width/height
     textAlign: "left",
-    paddingTop: 10,
+    paddingTop: height * 0.007, // 0.7% of screen width/height
+    fontFamily: "Roboto-Regular",
   },
   searchContainer: {
     flexDirection: "row",
@@ -58,23 +61,24 @@ const styles = StyleSheet.create({
     alignItems: "center",
     borderWidth: 1,
     borderColor: "rgba(0, 0, 0, 0.4)",
-    borderRadius: 10,
+    borderRadius: minDimension * 0.02, // 2% of screen width
     margin: 0,
-    marginBottom: 10,
+    marginBottom: height * 0.01, // 1% of screen height
   },
   searchIcon: {
-    padding: 10,
+    padding: minDimension * 0.02, // 2% of screen width
   },
   input: {
     flex: 1,
-    paddingVertical: 10,
+    paddingVertical: height * 0.01, // 1% of screen height
     color: "#424242",
   },
   itemTitle: {
-    padding: 10,
+    padding: minDimension * 0.02, // 2% of screen height/width
   },
   highlightedText: {
     color: "#00629B",
   },
 });
+
 export default styles;

dfm-sideline-sidekick-app/pages/generalPrinciplesMain.tsx

@@ -0,0 +1,69 @@
+import * as Font from "expo-font";
+import { useEffect, useState } from "react";
+import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native";
+
+import SearchBarComponent from "./GlobalSearch";
+import styles from "./generalPrinciplesMainStyles";
+
+const GeneralPrinciplesMain = () => {
+  const [fontsLoaded, setFontsLoaded] = useState<boolean>(false);
+
+  useEffect(() => {
+    async function loadFont() {
+      try {
+        await Font.loadAsync({
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          "Roboto-Regular": require("../assets/fonts/Roboto-Regular.ttf"),
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          "Roboto-Bold": require("../assets/fonts/Roboto-Bold.ttf"),
+        });
+        setFontsLoaded(true);
+      } catch (error) {
+        console.error("Error loading fonts:", error);
+      }
+    }
+
+    void loadFont();
+  }, []);
+
+  if (!fontsLoaded) {
+    return <Text>Loading...</Text>;
+  }
+
+  const renderPressables = () => {
+    const pressableData = [
+      ["Emergency Action Plan", "Trauma Centers"],
+      ["Burn Centers", "Stroke Centers"],
+      ["Inclement Weather", "Serious On-Field Injury"],
+      ["Catastrophic Incident", "Administering Medication"],
+      ["Muscle Injuries", "Ligament Injuries"],
+      ["Dislocations/Subluxations", "Fractures"],
+    ];
+
+    return pressableData.map((row, index) => (
+      <View key={index} style={styles.row}>
+        {row.map((label, colIndex) => (
+          <Pressable key={`${index}-${colIndex}`} style={styles.pressable}>
+            <Text style={styles.pressableText}>{label}</Text>
+          </Pressable>
+        ))}
+      </View>
+    ));
+  };
+
+  return (
+    <SafeAreaView>
+      <SearchBarComponent title="General Principles" />
+      <ScrollView alwaysBounceHorizontal={false} contentContainerStyle={{ flexGrow: 1 }}>
+        <View style={styles.container}>
+          <View style={styles.subheader}>
+            <Text style={styles.subheaderText}>Browse by Category</Text>
+          </View>
+          <View style={styles.grid}>{renderPressables()}</View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default GeneralPrinciplesMain;

dfm-sideline-sidekick-app/pages/generalPrinciplesMainStyles.tsx

@@ -0,0 +1,81 @@
+import { Dimensions, StyleSheet } from "react-native";
+
+const { width, height } = Dimensions.get("screen");
+const minDimension = Math.min(width, height);
+let pressableRatio = 0;
+
+// Calculate border radius and padding based on device dimensions
+//const borderRadius = (10.75 / 130) * Math.min(width, height);
+// const padding = 0.025 * Math.min(width, height);
+//
+//iPad = 0.3
+//phone=0.45
+
+//if (deviceWidth < deviceHeight): then ratio = 0.45
+//if (deviceHeight < deviceWidth): then ratio = 0.3
+const borderRadius = 0.035 * minDimension;
+
+if (width > height) {
+  pressableRatio = 0.3;
+} else {
+  pressableRatio = 0.45;
+}
+
+// Get the width of the device screen
+// const screenWidth = Dimensions.get("window").width;
+
+// // Calculate the number of columns based on the screen width
+// const numColumns = Math.floor(screenWidth / 140); // Adjust the width of Pressable components
+
+// // Calculate the width of each Pressable component
+// const pressableWidth = screenWidth / numColumns;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "column",
+    paddingBottom: 0.42 * height, //Give user leeway for optimal scroll space
+    // padding - We should not apply padding here as per Figma specification
+  },
+  subheader: {
+    justifyContent: "center", // Center the text vertically
+    // alignItems: "center", // Center the text horizontally
+    paddingLeft: (16 / 390) * width,
+    paddingVertical: (10 / 930.25) * height,
+  },
+  subheaderText: {
+    fontFamily: "Roboto-Regular",
+    fontSize: 0.05 * minDimension,
+  },
+  grid: {
+    flexDirection: "column",
+    // alignItems: "space-evenly",
+    justifyContent: "space-between", // Adjust this as per your spacing requirements
+  },
+  row: {
+    flexDirection: "row",
+    // alignItems: "flex-start",
+    justifyContent: "space-evenly", // Adjust this as per your spacing requirements
+    marginBottom: (10 / 930.25) * height, // Add margin to separate rows
+  },
+  pressable: {
+    backgroundColor: "#00629b",
+    borderColor: "#00000033",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius,
+    width: (170 / 390.0) * width, //uses Figma measurements to set a width
+    height: pressableRatio * (170 / 390.0) * width, //aspect ratio applied to width to set a height
+
+    //width: pressableWidth,
+  },
+  pressableText: {
+    fontFamily: "Roboto-Bold",
+    fontSize: 0.049 * minDimension,
+    // textAlign: "left",
+    color: "#ffffff",
+    paddingHorizontal: (13.98 / (2 * 390)) * width, //Figma measurements for padding horizontal
+    paddingVertical: (15.06 / (2 * 930.25)) * height, //Figma measurements for padding vertical
+  },
+});
+
+export default styles;