diff --git a/Template.js b/Template.js index 5c8c442..ae315b7 100644 --- a/Template.js +++ b/Template.js @@ -8,7 +8,7 @@ const Component = () => { // View ----------------------- return ( - ; + ); }; diff --git a/package-lock.json b/package-lock.json index 57d4335..65b89e7 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.10.tgz", - "integrity": "sha512-uLfgBi+7IBNay8ECBO2mVMGZAc1VgZWEChxm4lv+TobGdG82LnXMjuNGo/BSSZZL4UmkWhxEHP2f5ziLNwGWMA==", + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.0.tgz", + "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", diff --git a/package.json b/package.json index 4ec2b31..47f7106 100644 --- a/package.json +++ b/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" + } } diff --git a/src/components/UI/Button.js b/src/components/UI/Button.js index e68de01..2e9e693 100644 --- a/src/components/UI/Button.js +++ b/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 ( + + { + icon ? icon : null + } + + + {label} + + ); }; -const styles = StyleSheet.create({}); +export const ButtonTray = ({children}) => { -export default Component; \ No newline at end of file + // Initialisation ------------- + // State ---------------------- + // Handlers ------------------- + // View ----------------------- + + return ( + {children} + ); +}; + +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, + } + +}); diff --git a/src/components/UI/Icons.js b/src/components/UI/Icons.js new file mode 100644 index 0000000..b31f5ff --- /dev/null +++ b/src/components/UI/Icons.js @@ -0,0 +1,15 @@ +import {MaterialIcons} from '@expo/vector-icons' + +const Icons = {}; + +const Edit = () => ; +const Delete = () => ; +const Add = () => ; + +//compose +Icons.Edit = Edit; +Icons.Delete = Delete; +Icons.Add = Add; + + +export default Icons; \ No newline at end of file diff --git a/src/components/entity/modules/ModuleView.js b/src/components/entity/modules/ModuleView.js index 1319949..3c47a48 100644 --- a/src/components/entity/modules/ModuleView.js +++ b/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}) => { {module.ModuleLeaderName} (Module Leader) - + + +