add recipe selection and change tobBar

LeftOvers/App.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 import TopBar from './components/TopBar';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import RecipeSuggestion from './screens/RecipeSuggestion';
+import RecipeDetails from './screens/RecipeDetails';
+import IngredientSelection from './screens/IngredientSelection';
 
 const generateList = () => {
   const list = [];
@@ -23,7 +25,9 @@ export default function App() {
   const list = generateList();
 
   return (
-    <RecipeSuggestion list={list}></RecipeSuggestion>  
+    /*<RecipeDetails number="34" title="Flambé banane" duree="04H00"></RecipeDetails>*/
+    /*<RecipeSuggestion list={list}></RecipeSuggestion>*/  
+    <IngredientSelection list={list}></IngredientSelection>
   );
 }
 

LeftOvers/components/RecipeElement.tsx

@@ -4,8 +4,6 @@ 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';
-
 
 interface recipeElementProps {
   number : number

LeftOvers/components/RecipeElementReduce.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
 import brochette from '../assets/images/brochette.png'; 
 import background from '../assets/images/Background.png'; 
-import normalize from './Normalize';
 
 
 interface recipeElementReduceProps {

LeftOvers/components/SelectedIngredient.tsx

@@ -31,6 +31,7 @@ export default function SelectedIngredient(props: SelectedIngredientProps) {
   };
 
   const handlePress = () => {
+    // Supposons que vous voulez envoyer la valeur 'Hello' au parent
     props.onEvent('Hello');
   };
 

LeftOvers/components/TopBar.tsx

@@ -5,6 +5,7 @@ interface TopBarProps{
     source : string
     firstImage  : string
     lastImage : string
+    isVisible : boolean
   }
   
   
@@ -18,9 +19,15 @@ interface TopBarProps{
     return (
         <Appbar.Header  style={{backgroundColor: '#F2F0E4'}} >
             <Appbar.BackAction onPress={_goBack} />
-            <Appbar.Content title="Recipes" />
-            <Appbar.Action icon="magnify" onPress={_handleSearch} />
-            <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
+            <Appbar.Content title={props.title} />
+
+            {props.isVisible &&(
+              <><Appbar.Action icon="magnify" onPress={_handleSearch} />
+              <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
+              </>
+            )}
+
+            
       </Appbar.Header>
     );
   }

LeftOvers/screens/IngredientSelection.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import { View, StyleSheet, Text, Image, Pressable,ScrollView} from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import TopBar from '../components/TopBar';
+import { Searchbar } from 'react-native-paper';
+import brochette from '../assets/images/brochette.png'; 
+import FoodElementText from '../components/FoodElementText';
+import CustomButton from '../components/CustomButton';
+
+
+export default function IngredientSelection(props) {
+
+  const [searchQuery, setSearchQuery] = React.useState('');
+
+  const onChangeSearch = query => setSearchQuery(query);
+
+  return (
+    <SafeAreaProvider>
+          <TopBar title="Ingredient selection"/>
+          <View style={styles.page}>
+
+            <View style={styles.element}>
+              <View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}>
+                <Pressable>
+                    <Image source={brochette} style={{ width: 40, height: 40 }} />
+                </Pressable>
+                <Pressable>
+                    <Image source={brochette} style={{ width: 40, height: 40 }} />
+                </Pressable>
+                <Pressable>
+                    <Image source={brochette} style={{ width: 40, height: 40 }} />
+                </Pressable>
+                <Pressable>
+                    <Image source={brochette} style={{ width: 40, height: 40 }} />
+                </Pressable>
+              </View>
+              <View>
+              <Searchbar
+                  placeholder="Search"
+                  onChangeText={onChangeSearch}
+                  value={searchQuery} 
+                  style={{margin: 10, 
+                          backgroundColor: '#F2F0E4', 
+                          borderWidth : 1,
+                          borderColor: "#ACA279", 
+                          borderRadius: 15,
+                          height: 50,
+                          }}/>
+              </View>
+              <View style={{ flex: 1}} >
+                <ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
+
+                  <View style={styles.horizontalAlignement}>
+                    <FoodElementText title="test" />
+                    <Image source={brochette} style={{ width: 20, height: 20 }} />
+                  </View>
+                  <View style={{ height: 30 }}></View>
+
+                  <View style={styles.horizontalAlignement}>
+                    <FoodElementText title="test" />
+                    <Image source={brochette} style={{ width: 20, height: 20 }} />
+                  </View>
+                  <View style={{ height: 30 }}></View>
+
+                  <View style={styles.horizontalAlignement}>
+                    <FoodElementText title="test" />
+                    <Image source={brochette} style={{ width: 20, height: 20 }} />
+                  </View>
+                  <View style={{ height: 30 }}></View>
+
+                  <View style={styles.horizontalAlignement}>
+                    <FoodElementText title="test" />
+                    <Image source={brochette} style={{ width: 20, height: 20 }} />
+                  </View>
+                  <View style={{ height: 30 }}></View>
+
+                  <View style={styles.horizontalAlignement}>
+                    <FoodElementText title="test" />
+                    <Image source={brochette} style={{ width: 20, height: 20 }} />
+                  </View>
+                  <View style={{ height: 30 }}></View>
+  
+                  
+                </ScrollView>
+              </View>
+              <View style={{ height: 20 }}></View>
+            </View>
+
+            <View style={[styles.element, {marginTop:  40}]}>
+
+                <View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
+                  <Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
+                </View>
+                
+                <View style={{ height: 5 }}></View>
+
+                <View style={{ flex: 1}} >
+                <ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
+                <View style={styles.horizontalAlignement}>
+                    <FoodElementText title="test" />
+                    <Image source={brochette} style={{ width: 20, height: 20 }} />
+                  </View>
+                  <View style={{ height: 30 }}></View>
+
+                  <View style={styles.horizontalAlignement}>
+                    <FoodElementText title="test" />
+                    <Image source={brochette} style={{ width: 20, height: 20 }} />
+                  </View>
+                  <View style={{ height: 30 }}></View>
+
+                  <View style={styles.horizontalAlignement}>
+                    <FoodElementText title="test" />
+                    <Image source={brochette} style={{ width: 20, height: 20 }} />
+                  </View>
+                  <View style={{ height: 30 }}></View>
+                </ScrollView>
+              </View>
+              <View style={{ height: 20 }}></View>
+            </View>
+
+            <View style={{ height: 15 }}></View>
+            <CustomButton title="Find a recipe"/>                
+          </View>
+        </SafeAreaProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  page: {
+    flex: 1,
+    backgroundColor: '#59BDCD',
+    alignItems: 'center',
+    display: 'flex',
+    flexWrap: 'wrap',
+    padding: 20,
+  },
+  element: {
+    backgroundColor:'#F2F0E4', 
+    borderRadius: 30,
+  },
+  horizontalAlignement: {
+    display: 'flex',
+    height: 30,
+    width: 350,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    marginTop: 15,
+  }
+});

LeftOvers/screens/RecipeDetails.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { View, StyleSheet} from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import TopBar from '../components/TopBar';
+import RecipeElementReduce from '../components/RecipeElementReduce';
+
+
+export default function RecipeDetails(props) {
+    return (
+        <SafeAreaProvider>
+          <TopBar title="Recipe Detail" />
+          <View style={styles.page}>
+            <RecipeElementReduce 
+                title={props.title} 
+                number={props.number}
+                duree={props.duree}/>
+          </View>
+        </SafeAreaProvider>
+      );
+    }
+    
+    const styles = StyleSheet.create({
+      page: {
+        flex: 1,
+        backgroundColor: '#59BDCD',
+        alignItems: 'center',
+        display: 'flex',
+        flexWrap: 'wrap',
+        padding: 20,
+      },
+      element: {
+        marginTop: 20,
+      },
+      horizontalAlignement: {
+        display: 'flex',
+        height: 30,
+        width: 350,
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        marginTop: 10,
+      }
+    });
+    

LeftOvers/screens/RecipeSuggestion.tsx

@@ -10,6 +10,7 @@ import brochette from '../assets/images/brochette.png';
 import ParameterTopBar from '../components/ParameterTopBar';
 import bracketLeft from '../assets/images/angle_bracket_left.png';
 import bracketRight from '../assets/images/angle_bracket_right.png';
+import CustomButton from '../components/CustomButton';
 
 
 export default function RecipeSuggestion(props) {
@@ -26,7 +27,7 @@ export default function RecipeSuggestion(props) {
   const hideModal = () => setVisible(false);
   const containerStyle = {
     backgroundColor: 'white',
-    height: 400,
+    height: 450,
     width: 380,
   };
   
@@ -69,7 +70,7 @@ export default function RecipeSuggestion(props) {
 
   return (
     <SafeAreaProvider>
-      <TopBar />
+      <TopBar title="Recipes" isVisible="true"/>
       <View style={styles.page}>
         <SelectedIngredient 
           listeIngredient={props.list} 
@@ -105,13 +106,22 @@ export default function RecipeSuggestion(props) {
                                           <Image source={bracketRight} style={{ width: 20, height: 20 }} />
                                         </Pressable>
                                       </View>
+
+                                      <View>
+                                          <CustomButton title="Save"></CustomButton>
+                                      </View>
                         </View>
                         )} 
 
                         {visibleFilters &&(
                            <View style={[styles.page, { justifyContent: 'space-between'}]}>
                               <Text>HEHEHEHEHEHEHE</Text>
+                              <View>
+                                  <CustomButton title="Save"></CustomButton>
+                              </View>
                           </View>
+
+
                         )}
 
 
@@ -142,7 +152,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: '50%', // Centre verticalement
     left: '50%', // Centre horizontalement
-    transform: [{ translateX: -185 }, { translateY: -120 }], // Ajustez en fonction de la moitié de la hauteur et de la largeur
+    transform: [{ translateX: -185 }, { translateY: -90 }], // Ajustez en fonction de la moitié de la hauteur et de la largeur
   },
   horizontalAlignement: {
     display: 'flex',