Added Icons and buttons to module view

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 {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>);
 };
 

src/components/screens/ModuleViewScreen.js

@@ -3,7 +3,7 @@ import Screen from "../layout/Screen";
 import ModuleView from "../entity/modules/ModuleView";
 
 
-export const ModuleViewScreen = ({ route }) => {
+export const ModuleViewScreen = ({route}) => {
 //   Initialisation -------------
 
     const {module} = route.params;