Merge pull request 'WORK-RHA' (#6) from WORK-RHA into master

Reviewed-on: #6

LeftOvers/App.js

@@ -1,15 +1,22 @@
-import { StatusBar } from 'expo-status-bar';
 import React from 'react';
-import { StyleSheet, Text, View, Alert } from 'react-native';
+import { StyleSheet, View } from 'react-native';
-import CustomButton from './components/CustomButton';
+import RecipeElementImage from './components/RecipeElementImage';
-import FoodElementText from './components/FoodElementText';
+
+const generateImageList = () => {
+  const imageList = [];
+  const meat =  '../assets/images/meat.png'; 
+  for (let i = 0; i < 5; i++) {
+     imageList.push(meat);
+  }
+  return imageList;
+};
 
 export default function App() {
+  const imageList = [];
 
   return (
     <View style={styles.container}>
-      <FoodElementText title="Apple" image="plus" />
+      <RecipeElementImage title="Rice whith curry chicken" number="7" description="A delicious rice with a sweet chicken with curry sauce. Perfect recipes for winter, delicious and healthy"  imageList={imageList}></RecipeElementImage>
-      <FoodElementText title="Pineaple" image="moins" />
     </View>
   );
 }

LeftOvers/components/CustomButton.tsx

@@ -2,6 +2,11 @@ import React from 'react';
 import {StyleSheet,Pressable, Text, View} from 'react-native';
 
 
+interface CustomButtonProps {
+  source : string
+  title  : string
+}
+
 export default function CustomButton(props) {
   return (
     <Pressable style={styles.button}>

LeftOvers/components/FoodElementText.tsx

@@ -4,7 +4,15 @@ import Separator from '../components/Separator';
 import plus from '../assets/images/plus.png'; 
 import moins from '../assets/images/minus.png'; 
 
-export default function FoodElementText(props) {
+
+
+interface foodElementImageProps {
+  source : string
+  title  : string
+}
+
+
+export default function FoodElementText(props : any) {
   return (
     <Pressable style={styles.button}>
       <View style={styles.container}>
@@ -27,7 +35,7 @@ const styles = StyleSheet.create({
     height: 60,
     borderRadius: 5,
     elevation: 3,
-    backgroundColor: '#ACA279',
+    backgroundColor: '#E3DEC9',
   },
   text: {
     fontSize: 15,

LeftOvers/components/RecipeElementImage.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
+import brochette from '../assets/images/brochette.png'; 
+import Union_left from '../assets/images/Union_left.png';
+import Union_right from '../assets/images/Union_right.png';
+import background from '../assets/images/Background.png'; 
+
+
+interface recipeElementImageProps {
+  number : number
+  title  : string
+  description : string
+  imageList : string[]
+}
+
+export default function RecipeElementImage(props : any) {
+  return (
+    <Pressable style={styles.button}>
+      <View style={styles.view}>
+        <Text style={styles.text}>{props.number}</Text>
+        <Text style={styles.title}>{props.title}</Text>
+        <Image source={props.image ? props.image : brochette} style={{ width: 100, height: 100 }}/>
+        {props.imageList.length > 0 ? (
+          <View style={styles.horizontalAlignement}>
+            <Image source={Union_left} style={{ width: 70, height: 4, marginRight: 6 }} />
+            <Text style={styles.smallText}>Ingredients</Text>
+            <Image source={Union_right} style={{ width: 70, height: 4, marginLeft: 6 }} />
+          </View>
+        ) : null}
+        
+        <View style={styles.horizontalAlignement}>
+          {props.imageList.length > 0 && props.imageList.map((source, index) => (
+          <Image key={index} source={source} style={{ width: 40, height: 40 }} />
+          ))}
+        </View>
+
+        <View style={{alignItems: 'center', justifyContent: 'center'}}>
+        <Text style={styles.smallText}>{props.description}</Text>
+        </View>
+        <Image source={background} style={{width: 210, height: 20, marginTop: 300, position: 'absolute'}}></Image>
+      </View>
+    </Pressable>
+  ); 
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width : 250,
+    height: 350,
+    borderRadius: 40,
+    elevation: 3,
+    backgroundColor: '#E3DEC9',
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: '#756C28',
+    marginTop: 10,
+  },
+  smallText: {
+    fontSize: 12,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: '#71662A',
+    textAlign: "center",
+    marginTop: 5,
+  },
+  title:{
+    fontSize: 18,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: '#524B1A',
+  },
+  view: {
+    width : 240,
+    height: 340,
+    borderRadius: 40,
+    elevation: 3,
+    borderWidth: 2,
+    borderColor: 'grey',
+    alignItems: 'center', // Centre le contenu verticalement
+    display: "flex",
+    flexWrap: "wrap",
+  },
+  horizontalAlignement: {
+    display: "flex",
+    flexDirection : 'row',
+    alignItems: 'center', 
+    marginTop: 10,
+  }
+});