From 438350efeb316cd0efd3865fedf6d5ded10b2ef0 Mon Sep 17 00:00:00 2001 From: Rayhan Hassou Date: Fri, 10 Nov 2023 14:46:22 +0100 Subject: [PATCH] add a new component SelectedIngredients --- LeftOvers/App.js | 26 +++-- .../assets/images/angle_bracket_left.png | Bin 0 -> 3470 bytes .../assets/images/angle_bracket_right.png | Bin 0 -> 3454 bytes LeftOvers/assets/images/parameter.png | Bin 0 -> 410 bytes LeftOvers/components/FoodElementText.tsx | 8 +- LeftOvers/components/RecipeElementReduce.tsx | 4 +- LeftOvers/components/SelectedIngredient.tsx | 90 ++++++++++++++++++ LeftOvers/components/Separator.tsx | 2 +- LeftOvers/naviguation/parameter.png | Bin 0 -> 410 bytes 9 files changed, 106 insertions(+), 24 deletions(-) create mode 100644 LeftOvers/assets/images/angle_bracket_left.png create mode 100644 LeftOvers/assets/images/angle_bracket_right.png create mode 100644 LeftOvers/assets/images/parameter.png create mode 100644 LeftOvers/components/SelectedIngredient.tsx create mode 100644 LeftOvers/naviguation/parameter.png diff --git a/LeftOvers/App.js b/LeftOvers/App.js index 7c5d287..ed37109 100644 --- a/LeftOvers/App.js +++ b/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 ( - - - - + ); } diff --git a/LeftOvers/assets/images/angle_bracket_left.png b/LeftOvers/assets/images/angle_bracket_left.png new file mode 100644 index 0000000000000000000000000000000000000000..7af1534756a87ef242a88dfd8d30feca81a20437 GIT binary patch literal 3470 zcmd^CeNal2@WZSIdan?Y3^x!@9}g$nH5ddSaQ7i@`Ps;f6jo0>uz+=3+CGBpPG0_`Nd-rcfTclWd}Z@6l&XBfbb z)sJN9GmZCJF6e&_&^&2}PZS*Z+wS_DU+J5V>cGixy zbpWus4hbiO)87LK?21oG>;bsLKTfD!5LH+Y2-n|O51_ocv00cqm}$&30PEKJW_?(J zF}R2l&gfgCaoClpoCta52}FeBZQ*-kIFKv%A;bL`ocvWT(q~KzZh^I5E{r&#kZfuI zNP6JAYHI9THGm?E7ul>kruv{_U7?{Onb$e7q}TGRvy}iXRaqKmH|8&=4Z-E)hUVpd zcX5!`{HBr6si~ZZ(j=Wb4U)_4bwiVrH!?7sG!@I~Q!!zdpa|zh8qU;o;GiwE|JK~j zZJjq7UM%vvGqx^mu@&^8<^Pd%&H@x-dy)Bo>%mVjSmUU30@AZtXqlu3!5)+i2Nbu& za*=v?GXsL^vUn4==WL-);3OV!(!tuxMShLV%fSd~)M^aK^GI$X1S`4ks=fgx97kCN zYB9c#S7~y(JD5b4n8!^R6CUr3v3j_1!5_O4juDKm|C7A`Q>_aw%|XF+_gt~366T8E zeqkOPt!al#%mq~a`!D&C6l#zvLE+-@AG~yMvsy?2a;U^Sp3=;di|P=rXbp0DJ%z8U za}@ESd485s@@w;Qic<1p(25!T9B2NS(M1Ebsi?y+=&Px2Ll)@*97oBVv$Y?lJ@Dd31;s{M?hQ9YO}1j^^^7)Y5>Z zx=J2N&AsN_8N=*~!v#!~YwNy|$F^lz0Ch!I#;{~-=vl==vvF$Gw7kYO=o}5$2Qhw( zF7I&$78}jn?*)+hw+)+(#$CY05oz9EYHQH*(6)?=6D7#qecl|49BNKwmn6!^;z3ZJ z4;6mQNtMfss#%Yuvwz3$1Z9B)VG>SnxslGkyXo&7fJXLU$b!Ev0qe77&>8*qW0L2M zS{JZ;yHjqa<29pCMpgp!O{^0uM^LmRts6nr9tD>Hb${xbe!Ka_ z+cO07k!_i+F_1T3ZB?uhD~IP5>69WJDSq5lf0~V@BVX|V){VPL8&c3+wf3e%w#tn_ z7gJx=?$T3%I1$lkK-xF-$(Yk`53XsN6ujXAA5#p>M7cAo`j(p<>6#RXY2=A&*z!si z)W$NPLSF)wQXJw^uNOM2RUc#@I9kWUfnQ$SnSSgG6B@xe66x8q1R(P@I(qhiuVs5v zO9B6f0-h-<8oAO{Y!|x_{#_9qo})91%CYOgpH~f_{m!{q?04G)`sjw{$hoBw~`4pi1ja;O;)A(4{M2b>qkb1@Ii1ql3 zChhw`M!AZW&)8vR{vWb{j0t|gA&<|b+JJ&Z&0lBC;*LHQ{LB$Z*=wqip?1H#fVW4| z`Vxm!AMetN{;)=40Ll4czlZLLYX+}=SHGgrkY8|hM!VsK%99_u8p!DV0sTwHQ)b5> z1%;ktVHHc!wc=k^Rba2!H#Z#|YU4#RF^DZK?hMqs87-KFypCGN1VLFJ%A-DQVhaMD zyi3C+rb2gP6Ucm%ugBX_r`MIx#~>Ym-19m=TpI|)g^`Wrny~@pa!`88-mV7JYW3t5 zbhPLLfH>Nfa7}}{JeJB1HAR-s1C-7>84mepT2fTob(OdDBjf!5ZBmDp6lZ>lR1uYi zDWoy4!c46;n))j>A-BV|*!hct4{wYOb*FBg`u$e>Wc8U%X_~voL0+@%n5r`|{(9k9 i|Fw6o?}wmMdd%m|idRNYUT&xU(r`Sv+sd}`zy2rLx+~fM literal 0 HcmV?d00001 diff --git a/LeftOvers/assets/images/angle_bracket_right.png b/LeftOvers/assets/images/angle_bracket_right.png new file mode 100644 index 0000000000000000000000000000000000000000..58fb0b960e7c14c4d4d128c35da23c63ddb3e561 GIT binary patch literal 3454 zcmd^BiC0r+7QZhE0fb^xWk3mwrPh&6ka1y=u!w>S(9m%SAh8x15hO8zfQotQc;ZME zPqpm9+5>V@3Q{qEBg=Crg^^BBK}3ZR5e_7H%d^Q^Rc%@ER}$c-UiW?>V98_v@oE;;=)Y$bQUKff=)JM45F`Jnky zRd7I~l*~2%^WziWJ)*@G`Q9n2yRtLbtH*$luB z+f=IG^7p)$85O?z>D1oivjPl~Q=5kkUJZHrj`Pa^l2e+~hIsA5ivgq|3aoeV6xivf zqpjez;>AFsR=8ov46?iz(hPzjD}c$}U2W|{7J!>`ibQ#>G=S;R3ne*{JR~_>A88s+ zrvTv?FcSD|PGB9DlL=&fyYJfj=C1S^UlJ&+6RvL3o&&J|OJp_1M&__nVk>k7@UQMR zR8frJAzn;(%_iWeS}an#pY;lsxI$wX72_K*YIsF=qO8Wc3*b47@wPWzme@FD#dS zdI)9ivULsu56SO6+lUxEsn+oIPW^slSie8fRZ-O-)Z6#_kYSf&-8CAA z>(96>W02t0q!`ad6}w$xJ5|QZ@HbX3lHZi6J!-?`7zB+J>Y5gD&O}pzNZ%&OSTn@) zB7t`35^GuO#LYV;0a&e-69y0c_B-d1`!ohGC$o9OaMc&601^4WrSrQ$7VR+07V()A1spGNMIR9?{Z+y?GG zE1Zy9a_j(Vd@A}L=#&Fy`1Zr*VE?o*O>VhMMQS<|O{oo`g7+PtCv%;-rco)ui@h__rwU$)i z6r6t~vv`fZI6*y^SPj|@RJM8mgUL3ZcPdJjHF4D*h#bGGdJB!<*cxw#y{L_i70$R4 z1tg5{+%9>iH4ILJHq-_9sB!39%W?_oF&ZwKN=s>pnf|O6qr&T$Jz`lRv->g$_(zLb zc~E8!qxCIcHnha=Oae`)%i7zBu`AViB)6O!ha5db!CVxUjlP(5Z1IIR)}Wx%W5*X^ zL6*VUNbhw#!f_H}$}lL+-S^TP{@4v5Ymb(+!S{ja`P;2}^I{QZs||`NMHUy`$Z*FO zfGx5H=wC(#$m~Ss|6E2idjrnnMmRFe&-xU=Rqx^_!O{;Y(z8Q$H66V&5M9;tGtp;4gUoTE)<|+-TCou@T z^v-Xlu9t_*jGO%8MBO-QUjz4-8hFR=sbbBc@pL}xws1NSeMTO!Qp^lGUo+5ncuK!A zT;b6`@hdCkv_4Gf2E;jO?*d(ij1G!TtdwwlY~}rHwj|=z0g0_9T3iM2Fa=5D#`BA; zly=?c%1FTTknZ=AQYEVHA1ikBrypstgx4XS(jSiZ@N7YG3IPp1U;rPP@pl^FuB2ke z-2@#uxH6yRBY3wE#0Y7?WN_GI(3yVJ27^5Z(QEXitn$B7RZlh@*z2YeyTbubXcsPk z+A7VglmVSB!$RA19hs;ZZY^7Z;bL@CC0C~bTZzzbO>di5rB9jTQJ&J_!K3*=$fUhz z8#HrqO#ML!qrFUb`S5%=aa!#A*saxBx$|NF=bEQ}F8Zc+XYl_YzpOGP`@+P5pLE!m z-GQk2q>E$cx%huOMm0M3unSD9sORREYTQ@`ET+4{SRFPJTMnus%s3+$i>ISfy;>UT zg}57=U%iQMSw40`uvfTAPa5?Ha`cHSN6}q!eEE*vcIQSxBBfr*tyj)AW&ccLTaaXQ zR_vG(F92u@Jf|TOlk`vZP`g!m#ExwVoMhQl0=^sw@vOhm@=xJfj9rj_h5@hce}WQ8 zC_XHlLT$73T-U(FLTa^e8ogR|yw1VEPjruH;2LDpaQJ`Qh{S7jukLe;Lw0M26TKAEAZ^V0?7UDnFN#Y;yxs^ zd*ANu{kwvW*|8ncnD^S35Jv9R9h!{kCKbJ2+VWwBT}I+(dOiOH#S`H}APWukPXys9 zSPM8+yuaN)kHn7WOB$^3PYcAoq2ZzxCA}cbXYPWkPPsIZbA91HQFqr$Q`iQK~GB z$2s9L-nf0q2ZD}u=N2T~>~?O`WX{$|vDTjT3Vd~m9~R|_oVka=VgLXD07*qoM6N<$ Ef__h{jsO4v literal 0 HcmV?d00001 diff --git a/LeftOvers/components/FoodElementText.tsx b/LeftOvers/components/FoodElementText.tsx index 2e6062c..1e3b028 100644 --- a/LeftOvers/components/FoodElementText.tsx +++ b/LeftOvers/components/FoodElementText.tsx @@ -19,9 +19,7 @@ export default function FoodElementText(props : any) { {props.title} - - ); @@ -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', }, }); - - diff --git a/LeftOvers/components/RecipeElementReduce.tsx b/LeftOvers/components/RecipeElementReduce.tsx index b4d7920..88f8a59 100644 --- a/LeftOvers/components/RecipeElementReduce.tsx +++ b/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 ( diff --git a/LeftOvers/components/SelectedIngredient.tsx b/LeftOvers/components/SelectedIngredient.tsx new file mode 100644 index 0000000..e739d41 --- /dev/null +++ b/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 ( + + + Selected ingredients + + + + + + + + + + + + + + + + + + + ); +} + +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', + } + }); + + diff --git a/LeftOvers/components/Separator.tsx b/LeftOvers/components/Separator.tsx index 12562c2..dbeae6f 100644 --- a/LeftOvers/components/Separator.tsx +++ b/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, diff --git a/LeftOvers/naviguation/parameter.png b/LeftOvers/naviguation/parameter.png new file mode 100644 index 0000000000000000000000000000000000000000..08425b498d677ebd915c1bb20acb5317f0d496b6 GIT binary patch literal 410 zcmV;L0cHM)P)ruH;2LDpaQJ`Qh{S7jukLe;Lw0M26TKAEAZ^V0?7UDnFN#Y;yxs^ zd*ANu{kwvW*|8ncnD^S35Jv9R9h!{kCKbJ2+VWwBT}I+(dOiOH#S`H}APWukPXys9 zSPM8+yuaN)kHn7WOB$^3PYcAoq2ZzxCA}cbXYPWkPPsIZbA91HQFqr$Q`iQK~GB z$2s9L-nf0q2ZD}u=N2T~>~?O`WX{$|vDTjT3Vd~m9~R|_oVka=VgLXD07*qoM6N<$ Ef__h{jsO4v literal 0 HcmV?d00001