Sae_LeftOvers
/
LeftOvers
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add a few component like tabbar and selected ingredient, changes the recipe display and create a new page

Browse Source
pull/8/head
Rayhân HASSOU 1 year ago
parent 438350efeb
commit 45ab6bd7d3
8 changed files with 297 additions and 28 deletions
Show Stats Download Patch File Download Diff File

10
LeftOvers/App.js
Unescape View File

@ -1,8 +1,8 @@
import React from 'react';
import { StyleSheet, View } from 'react-native';
import SelectedIngredient from './components/SelectedIngredient';
import RecipeElementReduce from './components/RecipeElementReduce';
import RecipeElement from './components/RecipeElement';
import TopBar from './components/TopBar';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import RecipeSuggestion from './screens/RecipeSuggestion';
const generateList = () => {
const list = [];
@ -18,9 +18,7 @@ export default function App() {
const list = generateList();
return (
<View style={styles.container}>
<SelectedIngredient ListImage={imageList} listeIngredient={list}></SelectedIngredient>
</View>
<RecipeSuggestion list={list}></RecipeSuggestion>
);
}

BIN
LeftOvers/assets/images/backward_arrows.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

53
LeftOvers/components/RecipeElement.tsx
Unescape View File

@ -16,19 +16,23 @@ interface recipeElementProps {
}
export default function RecipeElement(props : any) {
const totalContentCount = props.imageList.length + 11;
const dynamicHeight = totalContentCount * 40;
const scrollViewHeight = 100;
return (
<Pressable style={styles.button}>
<View style={styles.view}>
<Pressable style={[styles.button, { height: dynamicHeight }]}>
<View style={[styles.view, { height: dynamicHeight - 10}]}>
<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 }}/>
{props.imageList.length > 0 ? (
<View style={styles.horizontalAlignement}>
<Image source={Union_left} style={{ width: 70, height: 4, marginRight: 6 }} />
<Text style={styles.smallText}>Ingredients</Text>
<Text style={styles.text}>Ingredients</Text>
<Image source={Union_right} style={{ width: 70, height: 4, marginLeft: 6 }} />
</View>
) : null}
<View style={styles.horizontalAlignement}>
{props.imageList.length > 0 && props.imageList.map((source, index) => (
@ -36,14 +40,30 @@ export default function RecipeElement(props : any) {
))}
</View>
<View style={{alignItems: 'center', justifyContent: 'center'}}>
{props.imageList.length <= 0 ? (
<View style={styles.horizontalAlignement}>
{props.textList.length > 0 && props.textList.map((source, index) => (
<Text key={index} style={styles.smallText}>{source}</Text>
))}
</View>
) : null}
<View style={styles.scrollViewContainer}>
<SafeAreaView>
<ScrollView>
<View style={styles.horizontalAlignement}>
<Image source={Union_left} style={{ width: 70, height: 4, marginRight: 6 }} />
<Text style={styles.text}>Description</Text>
<Image source={Union_right} style={{ width: 70, height: 4, marginLeft: 6 }} />
</View>
<ScrollView style={{ marginTop: 5, height: scrollViewHeight }}>
<Text style={styles.smallText}>{props.description}</Text>
</ScrollView>
</SafeAreaView>
</View>
<Image source={background} style={{width: 210, height: 20, marginTop: 300, position: 'absolute'}}></Image>
<Image source={background} style={{width: 210, height: 20, marginTop: dynamicHeight - 50, position: 'absolute'}}></Image>
</View>
</Pressable>
);
@ -54,8 +74,7 @@ const styles = StyleSheet.create({
button: {
alignItems: 'center',
justifyContent: 'center',
width : 250,
height: 350,
width : 300,
borderRadius: 40,
elevation: 3,
backgroundColor: '#E3DEC9',
@ -75,7 +94,7 @@ const styles = StyleSheet.create({
letterSpacing: 0.25,
color: '#71662A',
textAlign: "center",
marginTop: 5,
margin : 5
},
title:{
fontSize: 18,
@ -85,8 +104,7 @@ const styles = StyleSheet.create({
color: '#524B1A',
},
view: {
width : 240,
height: 340,
width : 290,
borderRadius: 40,
elevation: 3,
borderWidth: 2,
@ -99,6 +117,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
},
});

9
LeftOvers/components/SelectedIngredient.tsx
Unescape View File

@ -37,12 +37,11 @@ export default function SelectedIngredient(props : any) {
<View id="Top" style={styles.horizontalAlignement}>
<Text style={styles.text}>Selected ingredients</Text>
<Pressable>
<Image source={parameter} style={{ width: 20, height: 20 }} />
<Image source={parameter} style={{ width: 15, height: 15 }} />
</Pressable>
</View>
<View id="IngredientList" style={styles.horizontalAlignement}>
<Pressable onPress={decreaseCounter} id="GoLeft" style={{}}>
<Image source={bracketLeft} style={{ width: 40, height: 40 }} />
</Pressable>
@ -60,8 +59,8 @@ export default function SelectedIngredient(props : any) {
const styles = StyleSheet.create({
view: {
width : 350,
height: 120,
borderRadius: 10,
height: 110,
borderRadius: 15,
elevation: 3,
borderWidth: 2,
borderColor: 'black',
@ -71,7 +70,7 @@ const styles = StyleSheet.create({
},
horizontalAlignement: {
display: "flex",
height : 40,
height : 30,
width: 350,
flexDirection : 'row',
justifyContent : 'space-around',

28
LeftOvers/components/TopBar.tsx
Unescape View File

@ -0,0 +1,28 @@
import React, { startTransition } from 'react';
import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
import { Appbar } from 'react-native-paper';
import backward from '../assets/images/backward_arrows.png';
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 (
<Appbar.Header style={{backgroundColor: '#F2F0E4'}} >
<Appbar.BackAction onPress={_goBack} />
<Appbar.Content title="Title" />
<Appbar.Action icon="magnify" onPress={_handleSearch} />
<Appbar.Action icon="dots-vertical" onPress={_handleMore} />
</Appbar.Header>
);
}

171
LeftOvers/package-lock.json generated
Unescape View File

@ -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",

4
LeftOvers/package.json
Unescape View File

@ -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"
},

46
LeftOvers/screens/RecipeSuggestion.tsx
Unescape View File

@ -0,0 +1,46 @@
import React from 'react';
import {StyleSheet, View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import TopBar from '../components/TopBar';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import SelectedIngredient from '../components/SelectedIngredient';
import RecipeElement from '../components/RecipeElement';
interface RecipeSuggestionProps{
source : string
firstImage : string
lastImage : string
}
export default function RecipeSuggestion(props : any) {
const imageList=[]
return (
<SafeAreaProvider>
<TopBar></TopBar>
<View style={styles.page}>
<SelectedIngredient listeIngredient={props.list} imageList={imageList} style={styles.element}></SelectedIngredient>
<View style={{marginTop: 100}}>
<RecipeElement number="13" title="Pizza with Pineaples" imageList={imageList} textList={props.list} description="delicious plate that will please you" style={styles.element}></RecipeElement>
</View>
</View>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
page: {
flex: 1,
backgroundColor: '#59BDCD',
alignItems: 'center',
display: "flex",
flexWrap: "wrap",
padding: 20,
},
element: {
marginTop: 20,
}
});
Write Preview
Loading…
Cancel
Save