# Conflicts: # package-lock.json # package.jsonpull/9/head
|
After Width: | Height: | Size: 752 B |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 409 B |
|
After Width: | Height: | Size: 397 B |
|
After Width: | Height: | Size: 284 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 284 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 221 KiB |
|
After Width: | Height: | Size: 525 B |
@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet,Pressable, Text, View} from 'react-native';
|
||||
|
||||
|
||||
interface CustomButtonProps {
|
||||
source : string
|
||||
title : string
|
||||
}
|
||||
|
||||
export default function CustomButton(props) {
|
||||
return (
|
||||
<Pressable style={styles.button}>
|
||||
<View style={styles.view}>
|
||||
<Text style={styles.text}>{props.title}</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width : 150,
|
||||
height: 40,
|
||||
borderRadius: 4,
|
||||
elevation: 3,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||||
},
|
||||
text: {
|
||||
fontSize: 15,
|
||||
lineHeight: 21,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: 'white',
|
||||
},
|
||||
view: {
|
||||
width : 145,
|
||||
height: 35,
|
||||
borderRadius: 4,
|
||||
elevation: 3,
|
||||
borderWidth: 1,
|
||||
borderColor: 'grey',
|
||||
alignItems: 'center', // Centre le contenu verticalement
|
||||
justifyContent: 'center', // Centre le contenu horizontalement
|
||||
},
|
||||
});
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
|
||||
import Separator from '../components/Separator';
|
||||
import plus from '../assets/images/plus.png';
|
||||
import moins from '../assets/images/minus.png';
|
||||
|
||||
|
||||
|
||||
interface foodElementImageProps {
|
||||
source : string
|
||||
title : string
|
||||
}
|
||||
|
||||
|
||||
export default function FoodElementText(props : any) {
|
||||
return (
|
||||
<Pressable style={styles.button}>
|
||||
<View style={styles.container}>
|
||||
<View style={styles.view}>
|
||||
<Text style={styles.text}>{props.title}</Text>
|
||||
<Separator/>
|
||||
|
||||
</View>
|
||||
<Image source={plus} style={{width: 40, height: 40}}/>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width : 350,
|
||||
height: 60,
|
||||
borderRadius: 5,
|
||||
elevation: 3,
|
||||
backgroundColor: '#E3DEC9',
|
||||
},
|
||||
text: {
|
||||
fontSize: 15,
|
||||
lineHeight: 21,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
padding : 7,
|
||||
color: 'black',
|
||||
},
|
||||
view: {
|
||||
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'center',
|
||||
marginRight: 5 // Centre le contenu horizontalement
|
||||
},
|
||||
container: {
|
||||
width : 340,
|
||||
height: 50,
|
||||
borderRadius: 5,
|
||||
elevation: 3,
|
||||
borderWidth: 2,
|
||||
borderColor: 'black',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -0,0 +1,97 @@
|
||||
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';
|
||||
|
||||
|
||||
interface recipeElementImageProps {
|
||||
number : number
|
||||
title : string
|
||||
description : string
|
||||
imageList : string[]
|
||||
}
|
||||
|
||||
export default function RecipeElementImage(props : any) {
|
||||
return (
|
||||
<Pressable style={styles.button}>
|
||||
<View style={styles.view}>
|
||||
<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>
|
||||
<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) => (
|
||||
<Image key={index} source={source} style={{ width: 40, height: 40 }} />
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View style={{alignItems: 'center', justifyContent: 'center'}}>
|
||||
<Text style={styles.smallText}>{props.description}</Text>
|
||||
</View>
|
||||
<Image source={background} style={{width: 210, height: 20, marginTop: 300, position: 'absolute'}}></Image>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width : 250,
|
||||
height: 350,
|
||||
borderRadius: 40,
|
||||
elevation: 3,
|
||||
backgroundColor: '#E3DEC9',
|
||||
},
|
||||
text: {
|
||||
fontSize: 14,
|
||||
lineHeight: 21,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: '#756C28',
|
||||
marginTop: 10,
|
||||
},
|
||||
smallText: {
|
||||
fontSize: 12,
|
||||
lineHeight: 21,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: '#71662A',
|
||||
textAlign: "center",
|
||||
marginTop: 5,
|
||||
},
|
||||
title:{
|
||||
fontSize: 18,
|
||||
lineHeight: 21,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: '#524B1A',
|
||||
},
|
||||
view: {
|
||||
width : 240,
|
||||
height: 340,
|
||||
borderRadius: 40,
|
||||
elevation: 3,
|
||||
borderWidth: 2,
|
||||
borderColor: 'grey',
|
||||
alignItems: 'center', // Centre le contenu verticalement
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
horizontalAlignement: {
|
||||
display: "flex",
|
||||
flexDirection : 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: 10,
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, View} from 'react-native';
|
||||
|
||||
export default function Separator (){
|
||||
return <View style={styles.separator} />;
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
separator: {
|
||||
width: 250, // Largeur de la ligne
|
||||
backgroundColor: 'black', // Couleur de la ligne
|
||||
borderWidth : 1,
|
||||
marginLeft : 10,
|
||||
marginRight : 10,
|
||||
},
|
||||
});
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
declare module "*.png";
|
||||
declare module "*.svg";
|
||||
declare module "*.jpeg";
|
||||
declare module "*.jpg";
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"compilerOptions": {},
|
||||
"extends": "expo/tsconfig.base"
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
{
|
||||
"name": "LeftOvers",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
"dependencies": {
|
||||
"@eva-design/eva": "^2.2.0",
|
||||
"@ui-kitten/components": "^5.3.1",
|
||||
"react-native-svg": "^13.14.0"
|
||||
}
|
||||
}
|
||||
|
||||