|
|
|
@ -44,38 +44,6 @@ export default function RecipeDetails(props) {
|
|
|
|
|
return `${hoursString}${minutesString}`.trim();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<SafeAreaProvider>
|
|
|
|
|
<ScrollView>
|
|
|
|
|
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
|
|
|
|
|
<View style={{marginTop: "6%"}}>
|
|
|
|
|
<RecipeElementReduce
|
|
|
|
|
title={response.name}
|
|
|
|
|
number={response.id}
|
|
|
|
|
duration={convertToHoursMinutes(response.time_to_cook)} image={''}/>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={styles.separator}/>
|
|
|
|
|
<View style={styles.background}>
|
|
|
|
|
<View style={styles.filterBar}>
|
|
|
|
|
<Text style={styles.filters}>Preparation</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<ListWithoutSelect title="Ingredients" content={response.ingredients.map(ingredient => `- ${ingredient.name}`)}></ListWithoutSelect>
|
|
|
|
|
<View style={{marginTop: "3%"}}/>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={styles.separator}/>
|
|
|
|
|
<View style={styles.background}>
|
|
|
|
|
<View style={styles.filterBar}>
|
|
|
|
|
<Text style={styles.filters}>Cooking</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<ListWithoutSelect title="Steps" content={response.steps.map((step, index) => `${index + 1} - ${step}`)}></ListWithoutSelect>
|
|
|
|
|
<View style={{marginTop: "3%"}}/>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{marginBottom: "20%"}}/>
|
|
|
|
|
</LinearGradient>
|
|
|
|
|
</ScrollView>
|
|
|
|
|
</SafeAreaProvider>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
|
linearGradient: {
|
|
|
|
|
width: "100%",
|
|
|
|
@ -118,4 +86,36 @@ export default function RecipeDetails(props) {
|
|
|
|
|
textAlign: "right",
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<SafeAreaProvider>
|
|
|
|
|
<ScrollView>
|
|
|
|
|
<LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
|
|
|
|
|
<View style={{marginTop: "6%"}}>
|
|
|
|
|
<RecipeElementReduce
|
|
|
|
|
title={response.name}
|
|
|
|
|
number={response.id}
|
|
|
|
|
duration={convertToHoursMinutes(response.time_to_cook)} image={''}/>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={styles.separator}/>
|
|
|
|
|
<View style={styles.background}>
|
|
|
|
|
<View style={styles.filterBar}>
|
|
|
|
|
<Text style={styles.filters}>Preparation</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<ListWithoutSelect title="Ingredients" content={response.ingredients.map(ingredient => `- ${ingredient.name}`)}></ListWithoutSelect>
|
|
|
|
|
<View style={{marginTop: "3%"}}/>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={styles.separator}/>
|
|
|
|
|
<View style={styles.background}>
|
|
|
|
|
<View style={styles.filterBar}>
|
|
|
|
|
<Text style={styles.filters}>Cooking</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<ListWithoutSelect title="Steps" content={response.steps.map((step, index) => `${index + 1} - ${step}`)}></ListWithoutSelect>
|
|
|
|
|
<View style={{marginTop: "3%"}}/>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{marginBottom: "20%"}}/>
|
|
|
|
|
</LinearGradient>
|
|
|
|
|
</ScrollView>
|
|
|
|
|
</SafeAreaProvider>
|
|
|
|
|
);
|
|
|
|
|
}
|