add component for ingredient, the back end is not complete

LeftOvers/App.js

@@ -2,23 +2,14 @@ import { StatusBar } from 'expo-status-bar';
 import React from 'react';
 import { StyleSheet, Text, View, Alert } from 'react-native';
 import CustomButton from './components/CustomButton';
+import FoodElementText from './components/FoodElementText';
 
 export default function App() {
 
-  const handleButtonPress = () => {
-    console.log("test 1");
-  };
-
-  const handleButtonPress2 = () => {
-    console.log("test 2");
-  };
-
   return (
     <View style={styles.container}>
-      <Text>Ceci va etre la page qui charge le splashScreen</Text>
-      <StatusBar style="auto" />
-      <CustomButton title="Appuyez-moi" onPress={handleButtonPress} />
-      <CustomButton title="Autre test" onPress={handleButtonPress2} />
+      <FoodElementText title="Apple" image="plus" />
+      <FoodElementText title="Pineaple" image="moins" />
     </View>
   );
 }

LeftOvers/components/FoodElementText.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
+import Separator from '../components/Separator';
+import plus from '../assets/images/plus.png'; 
+import moins from '../assets/images/minus.png'; 
+
+export default function FoodElementText(props) {
+  return (
+    <Pressable style={styles.button}>
+      <View style={styles.container}>
+        <View style={styles.view}>
+            <Text style={styles.text}>{props.title}</Text>
+            <Separator/>
+            
+        </View>
+        <Image source={plus}  style={{width: 40, height: 40}}/>
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width : 350,
+    height: 60,
+    borderRadius: 5,
+    elevation: 3,
+    backgroundColor: '#ACA279',
+  },
+  text: {
+    fontSize: 15,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    padding : 7,
+    color: 'black',
+  },
+  view: {
+
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    marginRight: 5 // Centre le contenu horizontalement
+  },
+  container: {
+    width : 340,
+    height: 50,
+    borderRadius: 5,
+    elevation: 3,
+    borderWidth: 2,
+    borderColor: 'black',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});
+
+

LeftOvers/components/Separator.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+
+export default function Separator (){
+    return <View style={styles.separator} />;
+};
+  
+  const styles = StyleSheet.create({
+    separator: {
+      width: 250, // Largeur de la ligne
+      backgroundColor: 'black', // Couleur de la ligne
+      borderWidth : 1,
+      marginLeft : 10,
+      marginRight : 10,
+    },
+  });
+