Profile Component

LeftOvers/App.js

@@ -1,29 +1,13 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import {StyleSheet, View } from 'react-native';
-import RecipeElement from './components/RecipeElement';
+import ProfileModification from './components/ProfileModification';
-import RecipeElementReduce from './components/RecipeElementReduce';
-
-const generateImageList = () => {
-  const imageList = [];
-  const meat =  '../assets/images/meat.png'; 
-  for (let i = 0; i < 5; i++) {
-     imageList.push(meat);
-  }
-  return imageList;
-};
 
 export default function App() {
-  const imageList = [];
+    const all = [{title: "Mussels"}, {title: "Skimmed Milk"}, {title: "Nuts"}]
-
+    const die = [{title: "Dairy free"}, {title: "Porkless"}, {title: "Pescatarian"}]
   return (
     <View style={styles.container}>
-      <RecipeElement title="Rice whith curry chicken" number="7" description="A delicious rice with a sweet chicken with curry sauce.  je teste des trucs en vrai
+      <ProfileModification name="Johnny Silverhand" avatar="plus.png" diets={die} allergies={all}></ProfileModification>
-      en sah on fait des test parceque parfois la vie est dur faut etre solide
-      hahahaha je comprends pas comment c'est possible 
-      Perfect recipes for winter, delicious and healthy"  imageList={imageList}></RecipeElement>
-      <View style={{width: 50, height: 50}}></View>
-      <RecipeElementReduce title="Chocolate cake" number="12" duree="4h30"></RecipeElementReduce>
-
     </View>
   );
 }
@@ -31,7 +15,7 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: '#3F3C42',
     alignItems: 'center',
     justifyContent: 'center',
   },

LeftOvers/components/CustomButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet,Pressable, Text, View} from 'react-native';
+import {StyleSheet, Pressable, Text, View} from 'react-native';
 
 
 interface CustomButtonProps {

LeftOvers/components/ListTab.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
+import ValidateButton from './ValidateButton';
+
+type ListProps = {
+    title: string
+    content : list<string>
+}
+
+type ItemProps = {title: string}
+
+const Item = ({title}: ItemProps) => (
+    <View style={styles.itemList}>
+        <Text style={styles.itemText}>{title}</Text>
+    </View>
+)
+
+export default function ListTab(props: ListProps) {
+  return (
+    <View style={styles.background}>
+        <View style={styles.titleBar}>
+            <Text style={styles.title}>{props.title}</Text>
+            <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
+        </View>
+        <View>
+            <FlatList data={props.content} renderItem={({item}) => <Item title={item.title}/>}/>
+        </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  background: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 15,
+    backgroundColor: '#E3DEC9',
+  },
+  titleBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "stretch",
+    backgroundColor: "#F2F0E4",
+    borderTopRightRadius: 15,
+    borderTopLeftRadius: 15,
+    borderWidth: 2,
+    borderColor: "#ACA279",
+    width: 250,
+  },
+  arrow: {
+    height: 20,
+    width: 20,
+    resizeMode: 'contain',
+    tintColor: "#3F3C42",
+    flex: 0.5,
+  },
+  title: {
+    fontSize: 15,
+    color: '#3F3C42',
+    alignItems: 'center',
+    justifyContent: 'left',
+    textAlign: "left",
+    flex: 0.5,
+    padding: 5,
+  },
+
+  itemList: {
+      flexDirection: "row",
+      alignItems: "flex-start",
+      justifyContent: "stretch",
+      width: 250,
+  },
+  itemText: {
+      fontSize: 10,
+      textAlign: "left",
+      flex: 1,
+      padding: 5,
+      color: "#3F3C42",
+  },
+});

LeftOvers/components/ProfileModification.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import {StyleSheet, Text, TextInput, View, Image} from 'react-native';
+import ValidateButton from './ValidateButton';
+import ListTab from './ListTab';
+
+type ProfileProps = {
+  name: string
+  avatar: string
+  diets: list<string>
+  allergies: list<string>
+}
+
+export default function ProfileModification(props: ProfileProps) {
+  return (
+    <View style={styles.background}>
+        <View style={styles.pseudoBar}>
+            <Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
+            <TextInput style={styles.textInput} value={props.name}></TextInput>
+            <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
+        </View>
+        <View style={styles.filterBar}>
+            <Text style={styles.filters}>Filters</Text>
+            <Text style={styles.nbSelected}>3 selected</Text>
+        </View>
+        <ListTab title="Diets" content={props.diets}></ListTab>
+        <ListTab title="Allergies" content={props.allergies}></ListTab>
+        <ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  background: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 15,
+    backgroundColor: '#F2F0E4',
+    padding: 10,
+  },
+  pseudoBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 0.7,
+    width: 250,
+  },
+  avatar: {
+    height: 45,
+    width: 45,
+    resizeMode: 'contain',
+    borderWidth: 2,
+    borderColor: "#ACA279",
+    borderRadius: 45,
+  },
+  textInput: {
+    flex: 0.5,
+    fontSize: 15,
+    color: '#ACA279',
+    width : 150,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderStyle: 'dashed',
+    borderColor: '#ACA279',
+    alignItems: 'center', // Centre le contenu verticalement
+    justifyContent: 'left', // Centre le contenu horizontalement
+    flex: 0.8,
+    marginLeft: 20,
+    padding: 5,
+  },
+  modify: {
+      height: 20,
+      width: 20,
+      tintColor: "#ACA279",
+      resizeMode: 'contain',
+      flex: 0.1,
+      marginLeft: 5,
+  },
+
+
+
+  filterBar: {
+      flexDirection: "row",
+      width: 230,
+      paddingTop: 10,
+      paddingBottom: 0,
+      alignItems: "flex-end",
+      justifyContent: "center",
+      flex: 0.2,
+  },
+  filters: {
+      flex: 0.5,
+      fontSize: 15,
+      color: '#ACA279',
+      flex: 1,
+      padding: 5,
+      paddingLeft: 0,
+      paddingBottom: 0,
+  },
+  nbSelected: {
+      fontSize: 10,
+      flex: 1,
+      color: "#3F3C42",
+      textAlign: "right",
+    }
+});

LeftOvers/components/ValidateButton.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import {StyleSheet, Pressable, Text, View, Image} from 'react-native';
+
+
+type ValidateButtonProps = {
+  title: string
+  image: string
+  colour: string
+  backColour: string
+}
+
+export default function ValidateButton(props: ValidateButtonProps) {
+  return (
+    <Pressable style={{
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 20,
+        backgroundColor: props.backColour,}}>
+        <View style={{
+            borderRadius: 30,
+            borderWidth: 2,
+            borderColor: props.colour,
+            alignItems: 'center',
+            flexDirection: "row",
+            padding: 5,
+            paddingRight: 10,}}>
+            <Image source={require('../assets/images/'+props.image)} style={{
+                height: 30,
+                width: 30,
+                resizeMode: "center",
+                tintColor: props.colour,}}>
+            </Image>
+            <Text style={{
+                fontSize: 20,
+                color: props.colour,
+            }}>{props.title}</Text>
+        </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    //width : 150,
+    //height: 35,
+    borderRadius: 20,
+    backgroundColor: '#F2F0E4',
+  },
+  text: {
+    fontSize: 20,
+    color: '#ACA279',
+    paddingLeft: 15,
+    flex: 0.7,
+  },
+  view: {
+    //width: 150,
+    //height: 35,
+    borderRadius: 20,
+    borderWidth: 2,
+    borderColor: '#ACA279',
+    alignItems: 'center', // Centre le contenu verticalement
+    flex: 1,
+    flexDirection: "row",
+    paddingLeft: 25,
+    paddingRight: 30,
+    paddingTop: 5,
+    paddingBottom: 5,
+  },
+  image:{
+    height: 20,
+    width: 20,
+    flex: 0.3,
+    resizeMode: "center",
+    tintColor: "#ACA279",
+  },
+});

package.json

@@ -2,6 +2,12 @@
   "dependencies": {
     "@eva-design/eva": "^2.2.0",
     "@ui-kitten/components": "^5.3.1",
-    "react-native-svg": "^13.14.0"
+    "expo": "^49.0.17",
+    "react-native-svg": "^13.14.0",
+    "typescript": "^5.1.3",
+    "@types/react": "~18.2.14",
+    "react-native-web": "~0.19.6",
+    "react-dom": "18.2.0",
+    "@expo/webpack-config": "^19.0.0"
   }
 }