From baf18e5f804f9363b832d1fb346ac1d2bd3d3a70 Mon Sep 17 00:00:00 2001
From: Rayhan Hassou <Rayhan.HASSOU@etu.uca.fr>
Date: Wed, 8 Nov 2023 16:04:26 +0100
Subject: [PATCH] add component for ingredient, the back end is not complete

---
 LeftOvers/App.js                         |  15 ++----
 LeftOvers/assets/images/minus.png        | Bin 0 -> 2040 bytes
 LeftOvers/assets/images/plus.png         | Bin 0 -> 2633 bytes
 LeftOvers/components/FoodElementText.tsx |  58 +++++++++++++++++++++++
 LeftOvers/components/Separator.tsx       |  17 +++++++
 5 files changed, 78 insertions(+), 12 deletions(-)
 create mode 100644 LeftOvers/assets/images/minus.png
 create mode 100644 LeftOvers/assets/images/plus.png
 create mode 100644 LeftOvers/components/FoodElementText.tsx
 create mode 100644 LeftOvers/components/Separator.tsx

diff --git a/LeftOvers/App.js b/LeftOvers/App.js
index 69cb932..2cb99a4 100644
--- a/LeftOvers/App.js
+++ b/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>
   );
 }
diff --git a/LeftOvers/assets/images/minus.png b/LeftOvers/assets/images/minus.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e5886d04bb370d0781d15c02ec5e28392258986
GIT binary patch
literal 2040
zcmeHHi%-*66h6O}S}jn<V^R?;$^;cwo`a46El7EWjuq5`RND;{7H5ip1*Pz-B4+Y1
z>joMgQii}Ph!vPTBG666RT&i7P&Sad5$G^ggu)OC-H$)R#GBlld%t_~<;!=@J>SH#
z!_7%{Bmgjvj0oib;IJbOHgCd$KKu6-ENl@*BxC@XT5oIwDyk?Lh-7fWL!f2Q{$K23
zay&RD7~uA0Q-gp2KrD$24UW%7bQ3+Ntq<7{G}Y=@sS98G1aYX>YGpAWHrAQ$jeC)K
zJ!;-$3-3{9^uDQ5@`A~ZYmVv*m&PAQ_@=73>y~$>^ClC|s`4OhuqtDky`k&<dPg15
zt?W`9;i;}q9aJrj8J`}jQOewN0#|brTK%G_Tx$Zn^w^sddx}BR3%4$WXwp<Z!crTk
zx^m`_QLH+cq!&1>NOjT)t(lOF!G9QjF{Up0DUOI$)NS23G0>PjbH>B-?9iaIOVPdN
zRZ=oE4wo6O2}UiFntP{CX5#6!u9ENMqP6_;TnCNUk98e4r5(G6@U9#XTJ<G!L%QuW
zUh+xR*|t6r-Zd5!H~yT@r)az?lPSYGlTrZ@JrGco!#E*LE9?O}M*mPQTDQQRkkb4S
z`~8TrF<@{mm!Zg+ee+jV@LY}3iUg&cj<p(-XUU?d=l4etH;f{sTWXu$N-Yi+tJFHW
z3rZkCx!k2V3+eyDE?VN|f#VO4x+$|WJxP2C8K|>f0rO7@luCb6r{`)x?lyY-QMV@q
zN?rHJKk^-9EqFYAFu^FUrU5Y%u2$ZEK<#JSqIiE87&Bb-)o<$tA2t#F%E~rBm1X;S
z$&mz`4kL+wukF|a*{_eG<>MB=wc(jp1nU;<^{)_pZGu0Hlhi*%rdHs90PQMKUpff}
zjI}X53_)qkqLzydd!ciyjMckZvS0(RaqW*jkqP_()Q;Gn_lZET5yAmAG4*q5MFVKE
z(5-J@`LPiuRmQp%GGYVEmZ-1p0>&}t1Ye)A#B%s{GM4*(>`8x{2sh=`eL+4k2=gav
z+3v9X4VAax;~cw+8P*2_x`$1YT7p<rq7HC?>2XWu_B;4tL=!9aTh6=dWZ&QH-nHEn
z4JD%c7rE+5TycU<zbMhdoF@+`w}M`+zg3ngYmHIQ%g0SUd@o0x#(VpN+d^})72j>;
znc=tuhZV<creHfkIo-4x*ipAQgmc1*!=QvA9%M$j!GS9S&7Ps?-hExx{J6FF`HvI@
zIP^2Q$UN(0wyUy1e%TO6vj3S3O$wXMl_?c3zGcv*=TR<eZD)GC$BDufUe=o#ZWuJ*
z==D^bE_Oy}O=l`*?kP!FH{WlciYa`cY(i*7D^u)=rAc!0uN(cF^2}6=OKMM3iQZH(
zT#||Ch}Jv6K@(1-v3p(`cMkqH^L;VUi+ZHhW?xEZY;wU+?UCht+FR#)6O5`$mM~NQ
zSmC%#55p_S;zD!dQEwYW=uCo90jKrADQ~jnxi+nL=Gbf;eMI>w2NWlHg}Y?a$H?IX
y9@-Ujk0)NsEfd`JEg1`XM`zA^*_Z>$M1#fXQDMty{#BC=Ln2x1(3TMXx&HxIQ}FQs

literal 0
HcmV?d00001

diff --git a/LeftOvers/assets/images/plus.png b/LeftOvers/assets/images/plus.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b3d0f2dabd9dd071249d8db3e6e8ef2808dbcac
GIT binary patch
literal 2633
zcmeHJ`%jZ+6h7ZaD?&x&TGT=-7!fUsC<9ix-y{ncaViCYk_kl|3U<^ANIR0LOGPxW
zV4y0O%?lXD0F{EYW!xs03PM3!u}BRC3l;?dDYUEm8<zdz-sI$*^Caheb1r$#`*UP?
zh>7tgV*oG-JrEcLfa*;Y)~?a3dDhUfUKynypfUh(7M}%y5}u77L>N&a{!k+(Oz9mA
z-7m}!;Ew{_N+MPt@G3OW?^_l!GwK&b7_seoFB~V=wLAW`gt2d)9ugqlNM+%3_u5BP
zqZ^`b*PX$RaD(%H7u7GEqv2mP?+kWj*(~>|=k6`zi>e^)`r?hnrqUhyXTIFSId|@$
zNI<bsrt>N@w1Q77w7q>24^>~+qT>En2Jl0Qjk3?9SaHlJeV2Oz#S;2|O5_b@Emg4P
z4eHEj5Ro4^uc}XG<8-4ZC@2?&<jR%+;oUp2E2nR-UJgRw>AOa|vtk{6q7gXsLF;i9
zeUll$)3P*8g3sJKEKK)SFc}j%KA${-0g;$DJhxlx&WHg~VeD{@wXW227mS6*4XvPM
zwpfB?f4<PNzc8t9uD8Wm+k?W*c7l9W-b+Ow)_o`kuPfbXJelVJlU)b<<dMF349qK%
z`sCGU(`*GN{@BP$T>e}VQcpL8<@D(DDQ6AH#@D?NI6paMrwKyp9ihw=h37l;$ZU}p
zts0}BKXZT$2LOCY2*8j31OI+Kv@x}|+}O4S6G_3*jzf)2Zb~fs88@$MV`^6UX`*SD
z=XP505k-!Ta&&^h+JJ}x8iKSeUQ!s>+r?CsA=s=;L%x4;hS!r(lfS3_2DilC*1Kmt
z+^V-xhJDOjV={F_@wny$9de6d?9hdbT(VNrU-{8PUW8l2zbFHKge-W!GuLN6b&r_p
zX+CC`V7YQ6yVb*qMkGiYHqVxiS%<*O2Y09Z?P=@=x?xV-6@$hOGkD~jDqS#K_=eKW
z@G=#SujR;cw;$EC2~xQ_dFQ7HKTmY5a)EZM9$ko|7)M*ZCm`tx4Qief8;NqBL_XAR
z>4?mgJ0YUuRA2L_Yea6aQsJeLOIoj1j#@8CCLGGA!KJ8!_^d&Gjy<rK2ej>^frDmY
zFk8h5<l2{jXu;=r7B$cU$i@e@YTNiYjtY&U8sxn|fa8n8A`-AosCkWncnoQ<>C!gv
z*iE{&Wa<b@_c(!SZVJjdi`^PyHSiMkZ^kcGytG&sDqYYO2koOk13r(9zuGP)qMQVt
z<<&Q7W)aYTzxy2N*XUp5XS>}XXWwN;j7Xpf;jb1C;IW07VR-CnJ?DI;t5|5<y&i<a
z?=T)a*;_U&3}o?s@3DXv8{lPT^x#2`3{4c~9JXek%D{-?bhb*if?!p<JH8mFYYc$d
zY$?`%#;nyImPf30g?SVLGV3(sG1he^4Ce28y-}5Z5Z}sX>0A4ZiAsY4s?n^vswt-M
zaH|(a-|iYGRDaPW+B<2pHi<92<s&i!(+32l><k$g&zP$4)U0;(;Z`CESoh0sb1@00
zybYOmoIj)uuoLWNdK`@4;csy+tn`!5YZ7^iw{4+eI1AY$fg50=uP{cRka5?&@Cf=p
z4g3czC}UDZ(?&4a*0lUyhbBjWFL78>P>m+5gOHY#Se2n0JN{^y0TarIN;kHi+(~*%
zeNyXf*^fnFHCnRLvJ+@3aVP)g)G^C`6AJVfKXOZuTfyvBX&lU)0<{()_0~<`p$iN9
z`GX}-$JzRg6HZRG3qkOuIvmtG1bDH5U=6j5o-9EJn+l?O>hLMNwx@2%Ktv{|eqF$R
z+aX+CC)0w912-f5?Uc2SSXCelUJKWxl=(sFt3Ty}kx1~xUnpT>>=?~7O^JKb>x(TP
zD>#_8<akL#zVL2=?9<UwPonZpiMB%iX+r+x{zCrAoH<T+O}-q_`Ca$p&wgl7cwmh`
GE$?qu3cqIn

literal 0
HcmV?d00001

diff --git a/LeftOvers/components/FoodElementText.tsx b/LeftOvers/components/FoodElementText.tsx
new file mode 100644
index 0000000..5f3cf9e
--- /dev/null
+++ b/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',
+  },
+});
+
+
diff --git a/LeftOvers/components/Separator.tsx b/LeftOvers/components/Separator.tsx
new file mode 100644
index 0000000..12562c2
--- /dev/null
+++ b/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,
+    },
+  });
+  
\ No newline at end of file
-- 
2.36.3