upgrade some component and changes somes images

pull/12/head
Rayhân HASSOU 1 year ago
parent 0728523c62
commit 93eaee5ccc

@ -5,6 +5,7 @@ import ValidateButton from './components/ValidateButton';
import { LinearGradient } from 'expo-linear-gradient';
import RecipeSuggestion from './screens/RecipeSuggestion';
import RecipeDetails from './screens/RecipeDetails';
import IngredientSelection from './screens/IngredientSelection';
export default function App() {
const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
@ -36,14 +37,15 @@ export default function App() {
const ingredients = generateList();
return (
/*<RecipeSuggestion list={ingredients} diets={die} allergy={all}></RecipeSuggestion> */
<RecipeDetails ingredient={ingredient}
<IngredientSelection listIngredient={ingredients}></IngredientSelection>
/*<RecipeSuggestion list={ingredients} diets={die} allergy={all}></RecipeSuggestion>*/
/*<RecipeDetails ingredient={ingredient}
ustensils={ustensils}
steps={steps}
title="Chocolat Cake"
number="63"
duree="30 minutes"
></RecipeDetails>
></RecipeDetails>*/
);
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 410 B

@ -6,14 +6,36 @@ import { Searchbar } from 'react-native-paper';
import brochette from '../assets/images/brochette.png';
import FoodElementText from '../components/FoodElementText';
import CustomButton from '../components/CustomButton';
import plus from '../assets/images/plus.png';
import moins from '../assets/images/minus.png';
export default function IngredientSelection() {
export default function IngredientSelection(props) {
const [searchQuery, setSearchQuery] = React.useState('');
const onChangeSearch = query => setSearchQuery(query);
type ItemProps = {value: string}
const AvailaibleItem = ({value}: ItemProps) => (
<><View style={styles.horizontalAlignement}>
<FoodElementText title={value} />
<Pressable>
<Image source={plus} style={{ width: 20, height: 20 }} />
</Pressable>
</View><View style={{ height: 30 }}></View></>
)
const ChooseItem = ({value}: ItemProps) => (
<><View style={styles.horizontalAlignement}>
<FoodElementText title={value} />
<Pressable>
<Image source={moins} style={{ width: 20, height: 20 }} />
</Pressable>
</View><View style={{ height: 30 }}></View></>
)
return (
<SafeAreaProvider>
<TopBar title="Ingredient selection" />
@ -49,45 +71,15 @@ export default function IngredientSelection() {
</View>
<View style={{ flex: 1}} >
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
<View style={styles.horizontalAlignement}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignement}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignement}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignement}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignement}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
{props.listIngredient.map((source, index) => (
<AvailaibleItem key={index} value={source}></AvailaibleItem>
))}
</ScrollView>
</View>
<View style={{ height: 20 }}></View>
</View>
<View style={[styles.element, {marginTop: 40}]}>
<View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
<Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
</View>
@ -96,23 +88,9 @@ export default function IngredientSelection() {
<View style={{ flex: 1}} >
<ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
<View style={styles.horizontalAlignement}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignement}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
<View style={styles.horizontalAlignement}>
<FoodElementText title="test" />
<Image source={brochette} style={{ width: 20, height: 20 }} />
</View>
<View style={{ height: 30 }}></View>
{props.listIngredient.map((source, index) => (
<ChooseItem key={index} value={source}></ChooseItem>
))}
</ScrollView>
</View>
<View style={{ height: 20 }}></View>

@ -12,6 +12,8 @@ import bracketLeft from '../assets/images/angle_bracket_left.png';
import bracketRight from '../assets/images/angle_bracket_right.png';
import CustomButton from '../components/CustomButton';
import DietsTab from '../components/DietsTab';
import plus from '../assets/images/plus.png';
import moins from '../assets/images/minus.png';
export default function RecipeSuggestion(props) {
@ -44,7 +46,6 @@ export default function RecipeSuggestion(props) {
const handleChildEventGoIngredients = (value) => {
setVisibleFilters(false);
setVisibleIngredients(true);
console.log("jai change pour iingredient");
}
const decreaseCounter = () => {
@ -64,8 +65,14 @@ export default function RecipeSuggestion(props) {
const imageElements = limitedList.map((source, index) => (
<View style={[styles.horizontalAlignement, { marginBottom: 10 }]}>
<FoodElementText key={index} title={source} />
<Image source={brochette} style={{ width: 20, height: 20 }} />
<Image source={brochette} style={{ width: 20, height: 20 }} />
<Pressable>
<Image source={plus} style={{ width: 20, height: 20 }} />
</Pressable>
<Pressable>
<Image source={moins} style={{ width: 20, height: 20 }} />
</Pressable>
</View>
));
@ -132,11 +139,7 @@ export default function RecipeSuggestion(props) {
<CustomButton title="Save"></CustomButton>
</View>
</View>
)}
</Modal>
</Portal>
</PaperProvider>

Loading…
Cancel
Save