add a new component SelectedIngredients

LeftOvers/App.js

@@ -1,29 +1,25 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import RecipeElement from './components/RecipeElement';
+import SelectedIngredient from './components/SelectedIngredient';
 import RecipeElementReduce from './components/RecipeElementReduce';
+import RecipeElement from './components/RecipeElement';
 
-const generateImageList = () => {
-  const imageList = [];
-  const meat =  '../assets/images/meat.png'; 
-  for (let i = 0; i < 5; i++) {
-     imageList.push(meat);
-  }
-  return imageList;
+const generateList = () => {
+  const list = [];
+  list.push('Apple');
+  list.push('Pineapple');
+  list.push('Tomato');
+  list.push('Meat')
+  return list;
 };
 
 export default function App() {
   const imageList = [];
+  const list = generateList();
 
   return (
     <View style={styles.container}>
-      <RecipeElement title="Rice whith curry chicken" number="7" description="A delicious rice with a sweet chicken with curry sauce.  je teste des trucs en vrai
-      en sah on fait des test parceque parfois la vie est dur faut etre solide
-      hahahaha je comprends pas comment c'est possible 
-      Perfect recipes for winter, delicious and healthy"  imageList={imageList}></RecipeElement>
-      <View style={{width: 50, height: 50}}></View>
-      <RecipeElementReduce title="Chocolate cake" number="12" duree="4h30"></RecipeElementReduce>
-
+      <SelectedIngredient ListImage={imageList} listeIngredient={list}></SelectedIngredient>
     </View>
   );
 }

LeftOvers/components/FoodElementText.tsx

@@ -19,9 +19,7 @@ export default function FoodElementText(props : any) {
         <View style={styles.view}>
             <Text style={styles.text}>{props.title}</Text>
             <Separator/>
-            
         </View>
-        <Image source={plus}  style={{width: 40, height: 40}}/>
       </View>
     </Pressable>
   );
@@ -31,7 +29,7 @@ const styles = StyleSheet.create({
   button: {
     alignItems: 'center',
     justifyContent: 'center',
-    width : 350,
+    width : 270,
     height: 60,
     borderRadius: 5,
     elevation: 3,
@@ -52,7 +50,7 @@ const styles = StyleSheet.create({
     marginRight: 5 // Centre le contenu horizontalement
   },
   container: {
-    width : 340,
+    width :260,
     height: 50,
     borderRadius: 5,
     elevation: 3,
@@ -62,5 +60,3 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
 });
-
-

LeftOvers/components/RecipeElementReduce.tsx

@@ -1,8 +1,6 @@
 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'; 
 import normalize from './Normalize';
 
@@ -14,6 +12,8 @@ interface recipeElementReduceProps {
   duree : string
 }
 
+
+
 export default function RecipeElementReduce(props : any) {
   return (
     <Pressable style={styles.button}>

LeftOvers/components/SelectedIngredient.tsx

@@ -0,0 +1,90 @@
+import React,  { useState }  from 'react';
+import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
+import bracketLeft from '../assets/images/angle_bracket_left.png'; 
+import bracketRight from '../assets/images/angle_bracket_right.png';
+import parameter from '../assets/images/parameter.png';
+import FoodElementText from './FoodElementText';
+
+interface selectedIngredientProps {
+    listeIngredient : string[]
+    listeImage  : string[]
+    
+}
+
+export default function SelectedIngredient(props : any) {
+
+    const [cpt, setCpt] = useState(0);
+
+  const decreaseCounter = () => {
+    if (cpt > 0) {
+      setCpt(cpt - 1);
+    }
+    else{
+        setCpt( props.listeIngredient.length - 1);
+    }
+  };
+
+  const increaseCounter = () => {
+    if (cpt < props.listeIngredient.length - 1) {
+      setCpt(cpt + 1);
+    }else{
+        setCpt(0);
+    }
+  };
+
+    return (
+      <View style={styles.view}>
+        <View id="Top" style={styles.horizontalAlignement}>
+            <Text style={styles.text}>Selected ingredients</Text>
+            <Pressable>
+                <Image source={parameter} style={{ width: 20, height: 20 }} />
+            </Pressable>
+        </View>
+
+        <View id="IngredientList" style={styles.horizontalAlignement}>
+
+            <Pressable onPress={decreaseCounter} id="GoLeft" style={{}}>
+                <Image source={bracketLeft} style={{ width: 40, height: 40 }} />
+            </Pressable>
+
+            <FoodElementText title={props.listeIngredient[cpt]} />
+
+            <Pressable onPress={increaseCounter} id="GoRight" style={{}}>
+                <Image source={bracketRight} style={{ width: 40, height: 40 }} />
+            </Pressable>
+        </View>
+      </View>
+    );
+}
+
+const styles = StyleSheet.create({
+      view: {
+        width : 350,
+        height: 120,
+        borderRadius: 10,
+        elevation: 3,
+        borderWidth: 2,
+        borderColor: 'black',
+        display: "flex",
+        flexWrap: "wrap",
+        backgroundColor: '#E3DEC9',
+      },
+      horizontalAlignement: {
+        display: "flex",
+        height : 40,
+        width: 350,
+        flexDirection : 'row',
+        justifyContent : 'space-around',
+        alignItems: 'center',
+        marginTop: 10,
+      },
+      text: {
+        fontSize: 14,
+        lineHeight: 21,
+        fontWeight: 'bold',
+        letterSpacing: 0.25,
+        color: 'black',
+      }
+  });
+
+

LeftOvers/components/Separator.tsx

@@ -7,7 +7,7 @@ export default function Separator (){
   
   const styles = StyleSheet.create({
     separator: {
-      width: 250, // Largeur de la ligne
+      width: 200, // Largeur de la ligne
       backgroundColor: 'black', // Couleur de la ligne
       borderWidth : 1,
       marginLeft : 10,