diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx
index 359a60c..7ddde4d 100644
--- a/LeftOvers/App.tsx
+++ b/LeftOvers/App.tsx
@@ -6,7 +6,8 @@ import ModifyProfile from './screens/ModifyProfile';
import CreateProfile from './screens/CreateProfile';
import FiltersSelection from './screens/FiltersSelection';
import RecipeSuggestion from './screens/RecipeSuggestion';
-import RecipeDetail from './screens/RecipeSuggestion';
+import RecipeDetails from './screens/RecipeDetails';
+import IngredientSelection from './screens/IngredientSelection';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {LinearGradient} from 'expo-linear-gradient';
@@ -17,7 +18,8 @@ export default function App(props) {
//
//
//
-
- //
+ //
+ //
+
);
}
\ No newline at end of file
diff --git a/LeftOvers/assets/images/fruit_icon.png b/LeftOvers/assets/images/fruit_icon.png
new file mode 100644
index 0000000..4b20059
Binary files /dev/null and b/LeftOvers/assets/images/fruit_icon.png differ
diff --git a/LeftOvers/assets/images/meat_icon.png b/LeftOvers/assets/images/meat_icon.png
new file mode 100644
index 0000000..3eafc63
Binary files /dev/null and b/LeftOvers/assets/images/meat_icon.png differ
diff --git a/LeftOvers/assets/images/vegetable_icon.png b/LeftOvers/assets/images/vegetable_icon.png
new file mode 100644
index 0000000..2295c99
Binary files /dev/null and b/LeftOvers/assets/images/vegetable_icon.png differ
diff --git a/LeftOvers/components/RecipeElement.tsx b/LeftOvers/components/RecipeElement.tsx
index 096b1f3..e839ece 100644
--- a/LeftOvers/components/RecipeElement.tsx
+++ b/LeftOvers/components/RecipeElement.tsx
@@ -78,7 +78,7 @@ const styles = StyleSheet.create({
borderRadius: 40,
borderWidth: 2,
padding: "5%",
- borderColor: '#3F3C42',
+ borderColor: '#73692A',
alignItems: 'center',
justifyContent: "center",
},
diff --git a/LeftOvers/components/RecipeElementReduce.tsx b/LeftOvers/components/RecipeElementReduce.tsx
index e61a9bc..b952ff9 100644
--- a/LeftOvers/components/RecipeElementReduce.tsx
+++ b/LeftOvers/components/RecipeElementReduce.tsx
@@ -8,24 +8,21 @@ interface recipeElementReduceProps {
number : number
title : string
image : string
- duree : string
+ duration : string
}
-
-
-export default function RecipeElementReduce(props : any) {
+export default function RecipeElementReduce(props: recipeElementReduceProps) {
return (
-
+
{props.number}
{props.title}
-
-
-
- {props.duree}
-
+
+
+
+ {props.duration}
-
+
);
}
@@ -37,48 +34,39 @@ const styles = StyleSheet.create({
width : 250,
height: 250,
borderRadius: 40,
- elevation: 3,
backgroundColor: '#E3DEC9',
},
text: {
- fontSize: 14,
- lineHeight: 21,
+ fontSize: 15,
fontWeight: 'bold',
- letterSpacing: 0.25,
color: '#756C28',
- marginTop: 10,
+ marginTop: "4%",
+ zIndex: 2
},
smallText: {
- position: 'absolute',
- textAlign: 'center',
- left: 0,
- right: 0,
- marginHorizontal: 'auto',
- color: '#E3DEC9',
-
+ position: "absolute",
+ fontSize: 12,
+ color: '#F2F0E4',
+ textAlign: "center",
+ margin : "2%",
+ zIndex: 2,
+ fontWeight: "bold",
+ top: "89.25%"
},
title:{
- fontSize: 18,
- lineHeight: 21,
- fontWeight: 'bold',
- letterSpacing: 0.25,
- color: '#524B1A',
+ fontSize: 18,
+ fontWeight: 'bold',
+ color: '#524B1A',
+ zIndex: 2
},
view: {
- width : 240,
- height: 240,
- borderRadius: 40,
- elevation: 3,
- borderWidth: 2,
- borderColor: 'grey',
- alignItems: 'center', // Centre le contenu verticalement
- display: "flex",
- flexWrap: "wrap",
+ width : "95%",
+ height: "95%",
+ borderRadius: 40,
+ borderWidth: 2,
+ padding: "5%",
+ borderColor: '#73692A',
+ alignItems: 'center',
+ justifyContent: "center",
},
- horizontalAlignement: {
- display: "flex",
- flexDirection : 'row',
- alignItems: 'center',
- marginTop: 10,
- }
});
\ No newline at end of file
diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx
index 99fd407..d609883 100644
--- a/LeftOvers/screens/IngredientSelection.tsx
+++ b/LeftOvers/screens/IngredientSelection.tsx
@@ -1,144 +1,147 @@
import React from 'react';
-import {View, StyleSheet, Text, Image, Pressable, ScrollView} from 'react-native';
+import {View, StyleSheet, Text, Image, Pressable, ScrollView, useWindowDimensions} from 'react-native';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import TopBar from '../components/TopBar';
+import {LinearGradient} from 'expo-linear-gradient';
import {Searchbar} from 'react-native-paper';
-import brochette from '../assets/images/brochette.png';
+import brochette from '../assets/images/brochette.png';
import FoodElementText from '../components/FoodElementText';
import CustomButton from '../components/CustomButton';
export default function IngredientSelection() {
-
const [searchQuery, setSearchQuery] = React.useState('');
-
const onChangeSearch = query => setSearchQuery(query);
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
- Available
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ Available
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
);
}
const styles = StyleSheet.create({
- page: {
- flex: 1,
- backgroundColor: '#59BDCD',
- alignItems: 'center',
- display: 'flex',
- flexWrap: 'wrap',
- padding: 20,
- },
+ linearGradient: {
+ width: "100%",
+ flex: 1,
+ padding: "2%",
+ paddingTop: 0,
+ alignItems: "center",
+ justifyContent: "center"
+ },
+
element: {
- backgroundColor:'#F2F0E4',
- borderRadius: 30,
+ width: "100%",
+ backgroundColor:'#F2F0E4',
+ borderRadius: 25,
},
- horizontalAlignement: {
+ horizontalAlignment: {
display: 'flex',
height: 30,
width: 350,
diff --git a/LeftOvers/screens/RecipeDetails.tsx b/LeftOvers/screens/RecipeDetails.tsx
index 2b51f33..33a44f2 100644
--- a/LeftOvers/screens/RecipeDetails.tsx
+++ b/LeftOvers/screens/RecipeDetails.tsx
@@ -1,44 +1,93 @@
import React from 'react';
-import { View, StyleSheet} from 'react-native';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+import {View, StyleSheet, ScrollView, useWindowDimensions, Text} from 'react-native';
+import {SafeAreaProvider } from 'react-native-safe-area-context';
+import {LinearGradient} from 'expo-linear-gradient';
import TopBar from '../components/TopBar';
import RecipeElementReduce from '../components/RecipeElementReduce';
-
+import ListWithoutSelect from '../components/ListWithoutSelect';
+import ValidateButton from '../components/ValidateButton';
export default function RecipeDetails(props) {
+ const ing = [{value: "Chocolate"}, {value: "Milk"}, {value: "Eggs"}, {value: "Flour"}]
+ const ute = [{value: "Spoon (3cl)"}, {value: "Whisk"}, {value: "Oven"}]
+ const ste = [
+ {value: "1. Break the eggs and whisk them. Add the flour."},
+ {value: "2. Melt the chocolate in the microwave. Add it to the eggs."},
+ {value: "3. Put the cake in the oven. 40 minutes, 180 degrees."},
+ {value: "4. Clean the utensils."}
+ ]
+
return (
-
-
-
+
+
+
+
+
+
+
+
+ Preparation
+
+
+
+
+
+
+
+
+
+ Cooking
+
+
+
+
+
+
+
);
}
const styles = StyleSheet.create({
- page: {
- flex: 1,
- backgroundColor: '#59BDCD',
- alignItems: 'center',
- display: 'flex',
- flexWrap: 'wrap',
- padding: 20,
+ linearGradient: {
+ width: "100%",
+ flex: 1,
+ alignItems: "center",
+ justifyContent: "flex-start"
+ },
+ separator: {
+ marginTop: "6%",
+ },
+
+ background: {
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderRadius: 20,
+ backgroundColor: '#F2F0E4',
+ padding: "3%",
+ marginHorizontal: "3%",
+ },
+
+ filterBar: {
+ flexDirection: "row",
+ width: "85%",
+ paddingTop: "3%",
+ paddingBottom: "2%",
+ alignItems: "flex-end",
+ justifyContent: "center",
+ },
+ filters: {
+ fontSize: 20,
+ color: '#ACA279',
+ flex: 1,
},
- element: {
- marginTop: 20,
+ nbSelected: {
+ fontSize: 11,
+ color: "#3F3C42",
+ textAlign: "right",
},
- horizontalAlignement: {
- display: 'flex',
- height: 30,
- width: 350,
- flexDirection: 'row',
- justifyContent: 'space-around',
- alignItems: 'center',
- marginTop: 10,
- }
});
\ No newline at end of file
diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx
index e190c6b..9d1d25b 100644
--- a/LeftOvers/screens/RecipeSuggestion.tsx
+++ b/LeftOvers/screens/RecipeSuggestion.tsx
@@ -21,7 +21,7 @@ import minus from '../assets/images/minus.png';
export default function RecipeSuggestion(props) {
- const [visible, setVisible] = React.useState(true);
+ const [visible, setVisible] = React.useState(false);
const [visibleFilters, setVisibleFilters] = React.useState(false);
const [visibleIngredients, setVisibleIngredients] = React.useState(true);
const [minCpt, setMinCpt] = useState(0);
@@ -149,8 +149,8 @@ export default function RecipeSuggestion(props) {
-
-
+
+