diff --git a/LeftOvers/App.js b/LeftOvers/App.js index 7c5d287..5271af4 100644 --- a/LeftOvers/App.js +++ b/LeftOvers/App.js @@ -1,30 +1,29 @@ import React from 'react'; import { StyleSheet, View } from 'react-native'; -import RecipeElement from './components/RecipeElement'; -import RecipeElementReduce from './components/RecipeElementReduce'; +import TopBar from './components/TopBar'; +import { SafeAreaProvider } from 'react-native-safe-area-context'; +import RecipeSuggestion from './screens/RecipeSuggestion'; -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') + list.push('d)àrok'); + list.push('dddd'); + list.push('fff'); + list.push('fffgg') + list.push('Apple'); + 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 0000000..7af1534 Binary files /dev/null and b/LeftOvers/assets/images/angle_bracket_left.png differ diff --git a/LeftOvers/assets/images/angle_bracket_right.png b/LeftOvers/assets/images/angle_bracket_right.png new file mode 100644 index 0000000..58fb0b9 Binary files /dev/null and b/LeftOvers/assets/images/angle_bracket_right.png differ diff --git a/LeftOvers/assets/images/backward_arrows.png b/LeftOvers/assets/images/backward_arrows.png new file mode 100644 index 0000000..ea48792 Binary files /dev/null and b/LeftOvers/assets/images/backward_arrows.png differ diff --git a/LeftOvers/assets/images/parameter.png b/LeftOvers/assets/images/parameter.png new file mode 100644 index 0000000..08425b4 Binary files /dev/null and b/LeftOvers/assets/images/parameter.png differ 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/ParameterTopBar.tsx b/LeftOvers/components/ParameterTopBar.tsx new file mode 100644 index 0000000..6f84163 --- /dev/null +++ b/LeftOvers/components/ParameterTopBar.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Appbar } from 'react-native-paper'; + +interface TopBarProps{ + source : string + firstImage : string + lastImage : string + } + + + export default function ParameterTopBar(props : any) { + + const goFilter = () =>{ + props.onEventFilter('Hello'); + } + + const goIngredients = () =>{ + props.onEventIngredient('Hello'); + } + + return ( + + + + + ); + } \ No newline at end of file diff --git a/LeftOvers/components/RecipeElement.tsx b/LeftOvers/components/RecipeElement.tsx index b7925e9..57b5588 100644 --- a/LeftOvers/components/RecipeElement.tsx +++ b/LeftOvers/components/RecipeElement.tsx @@ -16,19 +16,24 @@ interface recipeElementProps { } export default function RecipeElement(props : any) { + + const totalContentCount = props.imageList.length + 11; + const dynamicHeight = totalContentCount * 40; + const scrollViewHeight = 100; + + + return ( - - + + {props.number} {props.title} - {props.imageList.length > 0 ? ( - Ingredients + Ingredients - ) : null} {props.imageList.length > 0 && props.imageList.map((source, index) => ( @@ -36,14 +41,30 @@ export default function RecipeElement(props : any) { ))} - + + {props.imageList.length <= 0 ? ( + + {props.textList.length > 0 && props.textList.map((source, index) => ( + {source} + ))} + + ) : null} + + + - - {props.description} + + + Description + + + + {props.description} - - + + + ); @@ -54,8 +75,7 @@ const styles = StyleSheet.create({ button: { alignItems: 'center', justifyContent: 'center', - width : 250, - height: 350, + width : 300, borderRadius: 40, elevation: 3, backgroundColor: '#E3DEC9', @@ -75,7 +95,7 @@ const styles = StyleSheet.create({ letterSpacing: 0.25, color: '#71662A', textAlign: "center", - marginTop: 5, + margin : 5 }, title:{ fontSize: 18, @@ -85,8 +105,7 @@ const styles = StyleSheet.create({ color: '#524B1A', }, view: { - width : 240, - height: 340, + width : 290, borderRadius: 40, elevation: 3, borderWidth: 2, @@ -99,6 +118,11 @@ const styles = StyleSheet.create({ display: "flex", flexDirection : 'row', alignItems: 'center', - marginTop: 10, - } + justifyContent: 'space-between', + marginTop : 5, + flexWrap: 'wrap', + }, + scrollViewContainer: { + flex: 1, // Assurez-vous que le reste du contenu occupe l'espace restant + }, }); \ No newline at end of file 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..a6c3ffd --- /dev/null +++ b/LeftOvers/components/SelectedIngredient.tsx @@ -0,0 +1,89 @@ +import React, { useState } from 'react'; +import { View, StyleSheet, Pressable, Image, Text } 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[]; + onEvent: (value: string) => void; +} + +export default function SelectedIngredient(props: SelectedIngredientProps) { + 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); + } + }; + + const handlePress = () => { + props.onEvent('Hello'); + }; + + return ( + + + Selected ingredients + + + + + + + + + + + + + + + + + + ); +} + +const styles = StyleSheet.create({ + view: { + width: 350, + height: 110, + borderRadius: 15, + elevation: 3, + borderWidth: 1, + borderColor: 'black', + display: 'flex', + flexWrap: 'wrap', + backgroundColor: '#E3DEC9', + }, + horizontalAlignement: { + display: 'flex', + height: 30, + 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/components/TopBar.tsx b/LeftOvers/components/TopBar.tsx new file mode 100644 index 0000000..639422d --- /dev/null +++ b/LeftOvers/components/TopBar.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Appbar } from 'react-native-paper'; + +interface TopBarProps{ + source : string + firstImage : string + lastImage : string + } + + + export default function TopBar(props : any) { + + const _goBack = () => console.log('Went back'); + + const _handleSearch = () => console.log('Searching'); + + const _handleMore = () => console.log('Shown more'); + return ( + + + + + + + ); + } \ No newline at end of file diff --git a/LeftOvers/naviguation/parameter.png b/LeftOvers/naviguation/parameter.png new file mode 100644 index 0000000..08425b4 Binary files /dev/null and b/LeftOvers/naviguation/parameter.png differ diff --git a/LeftOvers/package-lock.json b/LeftOvers/package-lock.json index 9c11e5c..dca14c6 100644 --- a/LeftOvers/package-lock.json +++ b/LeftOvers/package-lock.json @@ -16,7 +16,11 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.72.6", + "react-native-linear-gradient": "^2.8.3", + "react-native-paper": "^5.11.1", + "react-native-safe-area-context": "^4.7.4", "react-native-splash-screen": "^3.3.0", + "react-native-vector-icons": "^10.0.2", "react-native-web": "~0.19.6", "typescript": "^5.1.3" }, @@ -1968,6 +1972,26 @@ "node": ">=6.9.0" } }, + "node_modules/@callstack/react-theme-provider": { + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz", + "integrity": "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==", + "dependencies": { + "deepmerge": "^3.2.0", + "hoist-non-react-statics": "^3.3.0" + }, + "peerDependencies": { + "react": ">=16.3.0" + } + }, + "node_modules/@callstack/react-theme-provider/node_modules/deepmerge": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz", + "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/@expo/bunyan": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.0.tgz", @@ -7673,6 +7697,15 @@ "node": ">=6" } }, + "node_modules/color": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz", + "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==", + "dependencies": { + "color-convert": "^1.9.3", + "color-string": "^1.6.0" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -7686,6 +7719,15 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, + "node_modules/color-string": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz", + "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", + "dependencies": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, "node_modules/colord": { "version": "2.9.3", "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", @@ -10116,6 +10158,19 @@ "node": ">=8" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hosted-git-info": { "version": "3.0.8", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz", @@ -14790,6 +14845,40 @@ "react": "18.2.0" } }, + "node_modules/react-native-linear-gradient": { + "version": "2.8.3", + "resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.8.3.tgz", + "integrity": "sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA==", + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, + "node_modules/react-native-paper": { + "version": "5.11.1", + "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.11.1.tgz", + "integrity": "sha512-axqRTagGL8LtuYh172cx2Q2THOVJ3PTpPjCKhL5ECRdpJs2ceiboVecSiOIBuO3H7dVpaneptBA0vJr9HeVHwg==", + "dependencies": { + "@callstack/react-theme-provider": "^3.0.9", + "color": "^3.1.2", + "use-latest-callback": "^0.1.5" + }, + "peerDependencies": { + "react": "*", + "react-native": "*", + "react-native-safe-area-context": "*", + "react-native-vector-icons": "*" + } + }, + "node_modules/react-native-safe-area-context": { + "version": "4.7.4", + "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.7.4.tgz", + "integrity": "sha512-3LR3DCq9pdzlbq6vsHGWBFehXAKDh2Ljug6jWhLWs1QFuJHM6AS2+mH2JfKlB2LqiSFZOBcZfHQFz0sGaA3uqg==", + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-splash-screen": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/react-native-splash-screen/-/react-native-splash-screen-3.3.0.tgz", @@ -14798,6 +14887,67 @@ "react-native": ">=0.57.0" } }, + "node_modules/react-native-vector-icons": { + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.0.2.tgz", + "integrity": "sha512-ZwhUkJhIMkGL3cW7IT4sEEHu2AOzerqsRQ73UzXsB+ecBpVK5bRmp0XswiQleZKZalZfs/WIfWLXLfTQHcQo6A==", + "dependencies": { + "prop-types": "^15.7.2", + "yargs": "^16.1.1" + }, + "bin": { + "fa-upgrade.sh": "bin/fa-upgrade.sh", + "fa5-upgrade": "bin/fa5-upgrade.sh", + "fa6-upgrade": "bin/fa6-upgrade.sh", + "generate-icon": "bin/generate-icon.js" + } + }, + "node_modules/react-native-vector-icons/node_modules/cliui": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", + "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^7.0.0" + } + }, + "node_modules/react-native-vector-icons/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/react-native-vector-icons/node_modules/yargs": { + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", + "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==", + "dependencies": { + "cliui": "^7.0.2", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.0", + "y18n": "^5.0.5", + "yargs-parser": "^20.2.2" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/react-native-vector-icons/node_modules/yargs-parser": { + "version": "20.2.9", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", + "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", + "engines": { + "node": ">=10" + } + }, "node_modules/react-native-web": { "version": "0.19.9", "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.9.tgz", @@ -15519,6 +15669,19 @@ "node": ">= 5.10.0" } }, + "node_modules/simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", + "dependencies": { + "is-arrayish": "^0.3.1" + } + }, + "node_modules/simple-swizzle/node_modules/is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" + }, "node_modules/sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", @@ -16565,6 +16728,14 @@ "requires-port": "^1.0.0" } }, + "node_modules/use-latest-callback": { + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.9.tgz", + "integrity": "sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw==", + "peerDependencies": { + "react": ">=16.8" + } + }, "node_modules/use-sync-external-store": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", diff --git a/LeftOvers/package.json b/LeftOvers/package.json index 54de2b4..bcb7fd0 100644 --- a/LeftOvers/package.json +++ b/LeftOvers/package.json @@ -17,7 +17,11 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.72.6", + "react-native-linear-gradient": "^2.8.3", + "react-native-paper": "^5.11.1", + "react-native-safe-area-context": "^4.7.4", "react-native-splash-screen": "^3.3.0", + "react-native-vector-icons": "^10.0.2", "react-native-web": "~0.19.6", "typescript": "^5.1.3" }, diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx index e69de29..738fe00 100644 --- a/LeftOvers/screens/RecipeSuggestion.tsx +++ b/LeftOvers/screens/RecipeSuggestion.tsx @@ -0,0 +1,156 @@ +import React, { useState } from 'react'; +import { View, StyleSheet, Text, Image, Pressable} from 'react-native'; +import { SafeAreaProvider } from 'react-native-safe-area-context'; +import { Modal, Portal, PaperProvider} from 'react-native-paper'; +import TopBar from '../components/TopBar'; +import RecipeElement from '../components/RecipeElement'; +import SelectedIngredient from '../components/SelectedIngredient'; +import FoodElementText from '../components/FoodElementText'; +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'; + + +export default function RecipeSuggestion(props) { + + const imageList = []; + const [visible, setVisible] = React.useState(false); + const [visibleFilters, setVisibleFilters] = React.useState(false); + const [visibleIngredients, setVisibleIngredients] = React.useState(true); + const [minCpt, setMinCpt] = useState(0); + const [maxCpt, setMaxCpt] = useState(4); + const listeIngredient = props.list; + const limitedList = listeIngredient.slice(minCpt, maxCpt); + const showModal = () => setVisible(true); + const hideModal = () => setVisible(false); + const containerStyle = { + backgroundColor: 'white', + height: 400, + width: 380, + }; + + const handleChildEvent = (value) => { + setVisible(!visible) + }; + + const handleChildEventGoFilters = (value) => { + setVisibleIngredients(false); + setVisibleFilters(true); + } + + const handleChildEventGoIngredients = (value) => { + setVisibleFilters(false); + setVisibleIngredients(true); + console.log("jai change pour iingredient"); + } + + const decreaseCounter = () => { + if (minCpt > 0) { + setMinCpt(minCpt - 4); + setMaxCpt(maxCpt - 4) + } + }; + + const increaseCounter = () => { + if (maxCpt < listeIngredient.length) { + setMinCpt(minCpt + 4); + setMaxCpt(maxCpt + 4) + } + }; + + const imageElements = limitedList.map((source, index) => ( + + + + + + )); + + return ( + + + + + + + + + + + + + + + {visibleIngredients && ( + + {imageElements} + + + + + + + + + + + )} + + {visibleFilters &&( + + HEHEHEHEHEHEHE + + )} + + + + + + + + ); +} + +const styles = StyleSheet.create({ + page: { + flex: 1, + backgroundColor: '#59BDCD', + alignItems: 'center', + display: 'flex', + flexWrap: 'wrap', + padding: 20, + }, + element: { + marginTop: 20, + }, + backdrop: { + backgroundColor: 'rgba(0, 0, 0, 0.5)', + }, + modal :{ + 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 + }, + horizontalAlignement: { + display: 'flex', + height: 30, + width: 350, + flexDirection: 'row', + justifyContent: 'space-around', + alignItems: 'center', + marginTop: 10, + } +});