Added Icons and buttons to module view

Template.js

@@ -8,7 +8,7 @@ const Component = () => {
     //   View -----------------------
 
     return (
-        ;
+        <Text></Text>
 );
 };
 

package-lock.json

@@ -8,6 +8,7 @@
       "name": "crudler",
       "version": "1.0.0",
       "dependencies": {
+        "@expo/vector-icons": "^15.0.3",
         "@react-navigation/native": "^7.1.18",
         "@react-navigation/native-stack": "^7.5.1",
         "expo": "^54.0.20",
@@ -15,6 +16,9 @@
         "react": "19.1.0",
         "react-native": "^0.81.5",
         "react-native-fullwidth-image": "^0.1.3"
+      },
+      "devDependencies": {
+        "baseline-browser-mapping": "^2.9.0"
       }
     },
     "node_modules/@0no-co/graphql.web": {
@@ -2539,6 +2543,16 @@
       "integrity": "sha512-HHQigo3rQWKMDzYDLkubN5WQOYXJJE2eNqIQC2axC2iO3mHdwnIR7FgZVvHWtBwAdzBgAP0ECp8KqS8TiMKvgw==",
       "license": "MIT"
     },
+    "node_modules/@expo/vector-icons": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@expo/vector-icons/-/vector-icons-15.0.3.tgz",
+      "integrity": "sha512-SBUyYKphmlfUBqxSfDdJ3jAdEVSALS2VUPOUyqn48oZmb2TL/O7t7/PQm5v4NQujYEPLPMTLn9KVw6H7twwbTA==",
+      "peerDependencies": {
+        "expo-font": ">=14.0.4",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/@expo/ws-tunnel": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@expo/ws-tunnel/-/ws-tunnel-1.0.6.tgz",
@@ -3936,9 +3950,9 @@
       ]
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.10",
+      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.10.tgz",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.0.tgz",
-      "integrity": "sha512-uLfgBi+7IBNay8ECBO2mVMGZAc1VgZWEChxm4lv+TobGdG82LnXMjuNGo/BSSZZL4UmkWhxEHP2f5ziLNwGWMA==",
+      "integrity": "sha512-Mh++g+2LPfzZToywfE1BUzvZbfOY52Nil0rn9H1CPC5DJ7fX+Vir7nToBeoiSbB1zTNeGYbELEvJESujgGrzXw==",
       "bin": {
         "baseline-browser-mapping": "dist/cli.js"
       }
@@ -4779,6 +4793,19 @@
         }
       }
     },
+    "node_modules/expo-font": {
+      "version": "14.0.9",
+      "resolved": "https://registry.npmjs.org/expo-font/-/expo-font-14.0.9.tgz",
+      "integrity": "sha512-xCoQbR/36qqB6tew/LQ6GWICpaBmHLhg/Loix5Rku/0ZtNaXMJv08M9o1AcrdiGTn/Xf/BnLu6DgS45cWQEHZg==",
+      "dependencies": {
+        "fontfaceobserver": "^2.1.0"
+      },
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "3.0.19",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-3.0.19.tgz",
@@ -5060,17 +5087,6 @@
         }
       }
     },
-    "node_modules/expo/node_modules/@expo/vector-icons": {
-      "version": "15.0.3",
-      "resolved": "https://registry.npmjs.org/@expo/vector-icons/-/vector-icons-15.0.3.tgz",
-      "integrity": "sha512-SBUyYKphmlfUBqxSfDdJ3jAdEVSALS2VUPOUyqn48oZmb2TL/O7t7/PQm5v4NQujYEPLPMTLn9KVw6H7twwbTA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "expo-font": ">=14.0.4",
-        "react": "*",
-        "react-native": "*"
-      }
-    },
     "node_modules/expo/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -5222,20 +5238,6 @@
         "react-native": "*"
       }
     },
-    "node_modules/expo/node_modules/expo-font": {
-      "version": "14.0.9",
-      "resolved": "https://registry.npmjs.org/expo-font/-/expo-font-14.0.9.tgz",
-      "integrity": "sha512-xCoQbR/36qqB6tew/LQ6GWICpaBmHLhg/Loix5Rku/0ZtNaXMJv08M9o1AcrdiGTn/Xf/BnLu6DgS45cWQEHZg==",
-      "license": "MIT",
-      "dependencies": {
-        "fontfaceobserver": "^2.1.0"
-      },
-      "peerDependencies": {
-        "expo": "*",
-        "react": "*",
-        "react-native": "*"
-      }
-    },
     "node_modules/expo/node_modules/expo-keep-awake": {
       "version": "15.0.7",
       "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-15.0.7.tgz",

package.json

@@ -9,6 +9,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@expo/vector-icons": "^15.0.3",
     "@react-navigation/native": "^7.1.18",
     "@react-navigation/native-stack": "^7.5.1",
     "expo": "^54.0.20",
@@ -17,5 +18,8 @@
     "react-native": "^0.81.5",
     "react-native-fullwidth-image": "^0.1.3"
   },
-  "private": true
+  "private": true,
+  "devDependencies": {
+    "baseline-browser-mapping": "^2.9.0"
+  }
 }

src/components/UI/Button.js

@@ -1,6 +1,6 @@
-import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import {Pressable, StyleSheet, Text, View} from "react-native";
 
-const Component = () => {
+export const Button = ({label, icon, onClick, styleLabel, styleButton}) => {
 
     //   Initialisation -------------
     //   State ----------------------
@@ -8,10 +8,51 @@ const Component = () => {
     //   View -----------------------
 
     return (
+        <Pressable onPress={onClick} style={[styles.button, styleButton]}>
 
+            {
+                icon ? icon : null
+            }
+
+            <Text style={[styles.label, styleLabel]}>
+                {label}
+            </Text>
+        </Pressable>
     );
 };
 
-const styles = StyleSheet.create({});
+export const ButtonTray = ({children}) => {
 
-export default Component;
+    //   Initialisation -------------
+    //   State ----------------------
+    //   Handlers -------------------
+    //   View -----------------------
+
+    return (
+        <View style={styles.buttonTray}>{children}</View>
+    );
+};
+
+const styles = StyleSheet.create({
+    button: {
+        minHeight: 50,
+        borderWidth: 1,
+        borderRadius: 7,
+        borderColor: 'grey',
+        backgroundColor: 'white',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 3,
+        flex: 1,
+        flexDirection: 'row',
+        gap: 5,
+    },
+    label: {
+        fontSize: 16,
+    },
+    buttonTray: {
+        flexDirection: 'row',
+        gap: 15,
+    }
+
+});

src/components/UI/Icons.js

@@ -0,0 +1,15 @@
+import {MaterialIcons} from '@expo/vector-icons'
+
+const Icons = {};
+
+const Edit = () => <MaterialIcons name='edit' size={16}/>;
+const Delete = () => <MaterialIcons name='delete' size={16}/>;
+const Add = () => <MaterialIcons name='add' size={16}/>;
+
+//compose
+Icons.Edit = Edit;
+Icons.Delete = Delete;
+Icons.Add = Add;
+
+
+export default Icons;

src/components/entity/modules/ModuleView.js

@@ -1,5 +1,7 @@
 import {StyleSheet, Text, View} from "react-native";
 import FullWidthImage from "react-native-fullwidth-image";
+import {Button, ButtonTray} from "../../UI/Button";
+import Icons from "../../UI/Icons.js"
 
 const ModuleView = ({module}) => {
     //   Initialisation -------------
@@ -16,8 +18,18 @@ const ModuleView = ({module}) => {
             <Text style={styles.Text}>
                 {module.ModuleLeaderName} <Text style={styles.dimText}>(Module Leader)</Text>
             </Text>
-
         </View>
+
+        <ButtonTray>
+            <Button icon={<Icons.Edit/>} label={"Modify"}/>
+            <Button
+                icon={<Icons.Delete/>}
+                label={"Delete"}
+                styleButton={{backgroundColor: 'mistyrose'}}
+                styleLabel={{color: 'red'}}
+            />
+        </ButtonTray>
+
     </View>);
 };