add a new component, a reduce version of the recipeElement

LeftOvers/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import RecipeElementImage from './components/RecipeElementImage';
+import RecipeElement from './components/RecipeElement';
+import RecipeElementReduce from './components/RecipeElementReduce';
 
 const generateImageList = () => {
   const imageList = [];
@@ -16,7 +17,13 @@ export default function App() {
 
   return (
     <View style={styles.container}>
-      <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>
+      <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>
+
     </View>
   );
 }

LeftOvers/components/RecipeElement.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
-import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
+import {StyleSheet,Pressable, Text, View, Image, SafeAreaView, ScrollView} 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 {
+interface recipeElementProps {
   number : number
   title  : string
   description : string
   imageList : string[]
+  image : string
 }
 
-export default function RecipeElementImage(props : any) {
+export default function RecipeElement(props : any) {
   return (
     <Pressable style={styles.button}>
       <View style={styles.view}>
@@ -35,8 +36,12 @@ export default function RecipeElementImage(props : any) {
         </View>
 
         <View style={{alignItems: 'center', justifyContent: 'center'}}>
-        <Text style={styles.smallText}>{props.description}</Text>
-        </View>
+          <SafeAreaView>
+            <ScrollView>
+                  <Text style={styles.smallText}>{props.description}</Text>
+            </ScrollView>
+          </SafeAreaView>
+          </View>
         <Image source={background} style={{width: 210, height: 20, marginTop: 300, position: 'absolute'}}></Image>
       </View>
     </Pressable>

LeftOvers/components/RecipeElementReduce.tsx

@@ -0,0 +1,83 @@
+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 recipeElementReduceProps {
+  number : number
+  title  : string
+  image : string
+  duree : string
+}
+
+export default function RecipeElementReduce(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 }}/>
+        <View style={{marginTop: 200, position: 'absolute'}}>
+            <Image source={background} style={{width: 210, height: 20}}></Image>
+            <Text style={styles.smallText}>{props.duree}</Text>
+        </View>
+      </View>
+    </Pressable>
+  ); 
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width : 250,
+    height: 250,
+    borderRadius: 40,
+    elevation: 3,
+    backgroundColor: '#E3DEC9',
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: '#756C28',
+    marginTop: 10,
+  },
+  smallText: {
+    position: 'absolute', 
+    textAlign: 'center', 
+    left: 0, 
+    right: 0, 
+    marginHorizontal: 'auto', 
+    color: '#E3DEC9',
+    
+  },
+  title:{
+    fontSize: 18,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: '#524B1A',
+  },
+  view: {
+    width : 240,
+    height: 240,
+    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,
+  }
+});