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

Finish Update Views

Browse Source
pull/20/head
Louison PARANT 1 year ago
parent 6b0565bf94
commit a78889c246
3 changed files with 97 additions and 113 deletions
Show Stats Download Patch File Download Diff File

2
LeftOvers/components/FoodElementText.tsx
Unescape View File

@ -35,7 +35,7 @@ const styles = StyleSheet.create({
lineHeight: 20, lineHeight: 20,
fontWeight: 'bold', fontWeight: 'bold',
padding : "3%", padding : "3%",
color: 'black', color: '#3F3C42',
}, },
view: { view: {
alignItems: 'flex-start', alignItems: 'flex-start',

142
LeftOvers/screens/IngredientSelection.tsx
Unescape View File

@ -2,36 +2,68 @@ import React from 'react';
import {View, StyleSheet, Text, Image, Pressable, ScrollView, useWindowDimensions} from 'react-native'; import {View, StyleSheet, Text, Image, Pressable, ScrollView, useWindowDimensions} from 'react-native';
import {SafeAreaProvider} from 'react-native-safe-area-context'; import {SafeAreaProvider} from 'react-native-safe-area-context';
import TopBar from '../components/TopBar'; import TopBar from '../components/TopBar';
import {LinearGradient} from 'expo-linear-gradient';
import {Searchbar} from 'react-native-paper'; import {Searchbar} from 'react-native-paper';
import {LinearGradient} from 'expo-linear-gradient';
import brochette from '../assets/images/brochette.png'; import brochette from '../assets/images/brochette.png';
import FoodElementText from '../components/FoodElementText'; import FoodElementText from '../components/FoodElementText';
import CustomButton from '../components/CustomButton'; import CustomButton from '../components/CustomButton';
import plus from '../assets/images/plus_small.png';
import minus from '../assets/images/minus.png';
import meat from '../assets/images/meat_icon.png';
import vegetable from '../assets/images/vegetable_icon.png';
import fruit from '../assets/images/fruit_icon.png';
export default function IngredientSelection() { export default function IngredientSelection(props) {
const [searchQuery, setSearchQuery] = React.useState(''); const [searchQuery, setSearchQuery] = React.useState('');
const onChangeSearch = query => setSearchQuery(query); const onChangeSearch = query => setSearchQuery(query);
const ingredientList = [{title: "Steak"}, {title: "Sheep Ribs"}, {title: "Rabbit Thigh"}, {title: "Ham"}, {title: "Cream (Liquid)"}, {title: "Pepper Bell"}]
const availableList = [{title: "Tomato"}, {title: "Lemon"}, {title: "Strawberry"}, {title: "Rice"}, {title: "Flour"}]
type ItemProps = {value: string}
const AvailableItem = ({value}: any) => (
<>
<View style={styles.horizontalAlignment}>
<FoodElementText title={value.title}/>
<Pressable>
<Image source={plus} style={{width: 20, height: 20, resizeMode: "contain", marginRight: "3%"}}/>
</Pressable>
</View>
<View style={{height: 20}}/>
</>
)
const ChooseItem = ({value}: any) => (
<>
<View style={styles.horizontalAlignment}>
<FoodElementText title={value.title}/>
<Pressable>
<Image source={minus} style={{width: 20, height: 20, resizeMode: "contain", marginRight: "3%"}}/>
</Pressable>
</View>
<View style={{height: 20}}/>
</>
)
return ( return (
<SafeAreaProvider> <SafeAreaProvider style={{flex: 1}}>
<TopBar title="Ingredient selection"/> <TopBar title="Ingredient selection"/>
<ScrollView> <ScrollView>
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}> <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
<View style={{marginTop: "6%"}}/> <View style={{marginTop: "6%"}}/>
<View style={styles.element}> <View style={styles.element}>
<View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}> <View style={[styles.horizontalAlignment, {justifyContent: 'center'}]}>
<Pressable> <Pressable>
<Image source={brochette} style={{ width: 40, height: 40 }} /> <Image source={meat} style={{width: 30, height: 30, resizeMode: "contain"}}/>
</Pressable> </Pressable>
<View style={{marginHorizontal: "1%"}}/>
<Pressable> <Pressable>
<Image source={brochette} style={{ width: 40, height: 40 }} /> <Image source={vegetable} style={{width: 30, height: 30, resizeMode: "contain"}}/>
</Pressable> </Pressable>
<View style={{marginHorizontal: "1%"}}/>
<Pressable> <Pressable>
<Image source={brochette} style={{ width: 40, height: 40 }} /> <Image source={fruit} style={{width: 30, height: 30, resizeMode: "contain"}}/>
</Pressable>
<Pressable>
<Image source={brochette} style={{ width: 40, height: 40 }} />
</Pressable> </Pressable>
</View> </View>
<View> <View>
@ -39,87 +71,37 @@ export default function IngredientSelection() {
placeholder="Search" placeholder="Search"
onChangeText={onChangeSearch} onChangeText={onChangeSearch}
value={searchQuery} value={searchQuery}
style={{margin: 10, style={{margin: "3%",
backgroundColor: '#F2F0E4', backgroundColor: '#F2F0E4',
borderWidth : 1, borderWidth : 1,
borderColor: "#ACA279", borderColor: "#ACA279",
borderRadius: 15, borderRadius: 15,
height: 50,
}}/> }}/>
</View> </View>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}> <ScrollView>
{ingredientList.map((title, index) => (
<View style={styles.horizontalAlignment}> <AvailableItem key={index} value={title}></AvailableItem>
<FoodElementText title="test" /> ))}
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
</ScrollView> </ScrollView>
</View> </View>
<View style={{ height: 20 }}></View>
</View> </View>
<View style={{marginTop: "6%"}}/>
<View style={[styles.element, {marginTop: 40}]}> <View style={styles.element}>
<View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginLeft: "5%"}]}>
<View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginLeft: 10}]}>
<Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text> <Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
</View> </View>
<View style={{ height: 5 }}></View>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}> <ScrollView>
<View style={styles.horizontalAlignment}> {availableList.map((title, index) => (
<FoodElementText title="test" /> <ChooseItem key={index} value={title}></ChooseItem>
<Image source={brochette} style={{ width: 20, height: 20 }} /> ))}
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignment}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
</ScrollView> </ScrollView>
</View> </View>
<View style={{ height: 20 }}></View>
</View> </View>
<View style={{marginTop: "8%"}}></View>
<View style={{ height: 15 }}></View>
<CustomButton title="Find a recipe"/> <CustomButton title="Find a recipe"/>
<View style={{marginBottom: "20%"}}></View>
</LinearGradient> </LinearGradient>
</ScrollView> </ScrollView>
</SafeAreaProvider> </SafeAreaProvider>
@ -130,24 +112,22 @@ const styles = StyleSheet.create({
linearGradient: { linearGradient: {
width: "100%", width: "100%",
flex: 1, flex: 1,
padding: "2%", padding: "3%",
paddingTop: 0, paddingTop: 0,
alignItems: "center", alignItems: "center",
justifyContent: "center" justifyContent: "flex-start",
}, },
element: { element: {
width: "100%", width: "100%",
backgroundColor:'#F2F0E4', backgroundColor:'#F2F0E4',
borderRadius: 25, borderRadius: 30,
}, },
horizontalAlignment: { horizontalAlignment: {
display: 'flex', width: "100%",
height: 30,
width: 350,
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-around', justifyContent: 'space-around',
alignItems: 'center', alignItems: 'center',
marginTop: 15, marginTop: "3%",
} }
}); });

4
tsconfig.json
Unescape View File

@ -0,0 +1,4 @@
{
"compilerOptions": {},
"extends": "expo/tsconfig.base"
}
Write Preview
Loading…
Cancel
Save