mirror of
https://github.com/Sosokker/chefhai.git
synced 2025-12-19 14:04:08 +01:00
resolve merge conflict, use nativewind style
Create placeholder-food.jpg fix conflict code
This commit is contained in:
parent
aec27ba56c
commit
9120900554
@ -66,7 +66,6 @@ export default function TabLayout() {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<Tabs.Screen
|
<Tabs.Screen
|
||||||
name="profile"
|
|
||||||
name="profile"
|
name="profile"
|
||||||
options={{
|
options={{
|
||||||
title: "Profile",
|
title: "Profile",
|
||||||
|
|||||||
@ -1,12 +1,260 @@
|
|||||||
import { Text, View } from "react-native";
|
import { IconSymbol } from "@/components/ui/IconSymbol";
|
||||||
|
import { Image } from "expo-image";
|
||||||
|
import {
|
||||||
|
ScrollView,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
TextInput,
|
||||||
|
TouchableOpacity,
|
||||||
|
View,
|
||||||
|
} from "react-native";
|
||||||
|
import { SafeAreaView } from "react-native-safe-area-context";
|
||||||
|
|
||||||
export default function ForumScreen() {
|
export default function ForumScreen() {
|
||||||
return (
|
return (
|
||||||
<View className="flex-1 items-center justify-center bg-white">
|
<SafeAreaView style={styles.container} edges={["top"]}>
|
||||||
<Text className="text-2xl font-bold">Forum Screen</Text>
|
<ScrollView style={styles.scrollView}>
|
||||||
<Text className="mt-2 text-gray-500">
|
{/* Search Bar */}
|
||||||
Discussions and community posts will appear here
|
<View style={styles.searchContainer}>
|
||||||
</Text>
|
<IconSymbol name="magnifyingglass" size={20} color="#FF0000" />
|
||||||
</View>
|
<TextInput
|
||||||
|
style={styles.searchInput}
|
||||||
|
placeholder="Search"
|
||||||
|
placeholderTextColor="#FF0000"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Category Filters */}
|
||||||
|
<View style={styles.categoryContainer}>
|
||||||
|
<TouchableOpacity style={styles.categoryButton}>
|
||||||
|
<Text style={styles.categoryText}>Main dish</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={styles.categoryButton}>
|
||||||
|
<Text style={styles.categoryText}>Dessert</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={styles.categoryButton}>
|
||||||
|
<Text style={styles.categoryText}>Appetite</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Filter Options */}
|
||||||
|
<View style={styles.filterContainer}>
|
||||||
|
<TouchableOpacity style={styles.filterButton}>
|
||||||
|
<Text style={styles.filterText}>Rating</Text>
|
||||||
|
<IconSymbol name="star.fill" size={16} color="#FFCC00" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={styles.filterButton}>
|
||||||
|
<Text style={styles.filterText}>Newest</Text>
|
||||||
|
<IconSymbol name="calendar" size={16} color="#FFFFFF" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={styles.filterButton}>
|
||||||
|
<Text style={styles.filterText}>Best</Text>
|
||||||
|
<IconSymbol name="flame.fill" size={16} color="#FFCC00" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Post */}
|
||||||
|
<View style={styles.postContainer}>
|
||||||
|
{/* User Info */}
|
||||||
|
<View style={styles.userInfoContainer}>
|
||||||
|
<View style={styles.userInfo}>
|
||||||
|
<View style={styles.userAvatar}>
|
||||||
|
<IconSymbol
|
||||||
|
name="person.circle.fill"
|
||||||
|
size={24}
|
||||||
|
color="#888888"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.userName}>Mr. Chef</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.ratingContainer}>
|
||||||
|
<Text style={styles.ratingText}>4.2</Text>
|
||||||
|
<IconSymbol name="star.fill" size={16} color="#FFCC00" />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Post Image */}
|
||||||
|
<Image
|
||||||
|
source={require("@/assets/images/placeholder-food.jpg")}
|
||||||
|
style={styles.postImage}
|
||||||
|
contentFit="cover"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Post Content */}
|
||||||
|
<View style={styles.postContent}>
|
||||||
|
<Text style={styles.postTitle}>Kajjecaw</Text>
|
||||||
|
<Text style={styles.postDescription}>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at
|
||||||
|
hendrerit enim. Etiam lacinia mi nec nunc ornare, vitae tempus leo
|
||||||
|
aliquet...
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Post Actions */}
|
||||||
|
<View style={styles.postActions}>
|
||||||
|
<TouchableOpacity style={styles.actionButton}>
|
||||||
|
<IconSymbol
|
||||||
|
name="arrowshape.turn.up.left.fill"
|
||||||
|
size={16}
|
||||||
|
color="#888888"
|
||||||
|
/>
|
||||||
|
<Text style={styles.actionText}>3</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={styles.actionButton}>
|
||||||
|
<IconSymbol name="text.bubble.fill" size={16} color="#888888" />
|
||||||
|
<Text style={styles.actionText}>2</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={styles.actionButton}>
|
||||||
|
<IconSymbol name="heart.fill" size={16} color="#888888" />
|
||||||
|
<Text style={styles.actionText}>2</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={styles.actionButton}>
|
||||||
|
<IconSymbol name="bookmark.fill" size={16} color="#888888" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
</SafeAreaView>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: "#FFFFFF",
|
||||||
|
},
|
||||||
|
scrollView: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
searchContainer: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
marginHorizontal: 16,
|
||||||
|
marginTop: 10,
|
||||||
|
marginBottom: 16,
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
height: 40,
|
||||||
|
backgroundColor: "#FFFFFF",
|
||||||
|
borderRadius: 20,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#DDDDDD",
|
||||||
|
},
|
||||||
|
searchInput: {
|
||||||
|
flex: 1,
|
||||||
|
marginLeft: 8,
|
||||||
|
color: "#333333",
|
||||||
|
},
|
||||||
|
categoryContainer: {
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
marginHorizontal: 16,
|
||||||
|
marginBottom: 16,
|
||||||
|
},
|
||||||
|
categoryButton: {
|
||||||
|
backgroundColor: "#FFCC00",
|
||||||
|
paddingVertical: 12,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
borderRadius: 12,
|
||||||
|
flex: 1,
|
||||||
|
marginHorizontal: 4,
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
categoryText: {
|
||||||
|
fontWeight: "bold",
|
||||||
|
color: "#333333",
|
||||||
|
},
|
||||||
|
filterContainer: {
|
||||||
|
flexDirection: "row",
|
||||||
|
marginHorizontal: 16,
|
||||||
|
marginBottom: 16,
|
||||||
|
},
|
||||||
|
filterButton: {
|
||||||
|
backgroundColor: "#FF0000",
|
||||||
|
paddingVertical: 8,
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
borderRadius: 20,
|
||||||
|
marginRight: 8,
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
filterText: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
fontWeight: "bold",
|
||||||
|
marginRight: 4,
|
||||||
|
},
|
||||||
|
postContainer: {
|
||||||
|
marginHorizontal: 16,
|
||||||
|
marginBottom: 16,
|
||||||
|
backgroundColor: "#FFFFFF",
|
||||||
|
borderRadius: 12,
|
||||||
|
overflow: "hidden",
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#EEEEEE",
|
||||||
|
},
|
||||||
|
userInfoContainer: {
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
paddingVertical: 8,
|
||||||
|
},
|
||||||
|
userInfo: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
userAvatar: {
|
||||||
|
width: 32,
|
||||||
|
height: 32,
|
||||||
|
borderRadius: 16,
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
backgroundColor: "#F5F5F5",
|
||||||
|
},
|
||||||
|
userName: {
|
||||||
|
marginLeft: 8,
|
||||||
|
fontWeight: "bold",
|
||||||
|
color: "#333333",
|
||||||
|
},
|
||||||
|
ratingContainer: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
ratingText: {
|
||||||
|
marginRight: 4,
|
||||||
|
fontWeight: "bold",
|
||||||
|
color: "#333333",
|
||||||
|
},
|
||||||
|
postImage: {
|
||||||
|
width: "100%",
|
||||||
|
height: 200,
|
||||||
|
},
|
||||||
|
postContent: {
|
||||||
|
padding: 12,
|
||||||
|
},
|
||||||
|
postTitle: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: "bold",
|
||||||
|
marginBottom: 4,
|
||||||
|
color: "#333333",
|
||||||
|
},
|
||||||
|
postDescription: {
|
||||||
|
color: "#666666",
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
postActions: {
|
||||||
|
flexDirection: "row",
|
||||||
|
borderTopWidth: 1,
|
||||||
|
borderTopColor: "#EEEEEE",
|
||||||
|
paddingVertical: 8,
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
},
|
||||||
|
actionButton: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
marginRight: 16,
|
||||||
|
},
|
||||||
|
actionText: {
|
||||||
|
marginLeft: 4,
|
||||||
|
color: "#666666",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
import { IconSymbol } from "@/components/ui/IconSymbol";
|
||||||
import { Feather, FontAwesome, Ionicons } from "@expo/vector-icons";
|
import { Feather, FontAwesome, Ionicons } from "@expo/vector-icons";
|
||||||
import * as ImagePicker from "expo-image-picker";
|
import * as ImagePicker from "expo-image-picker";
|
||||||
import { router } from "expo-router";
|
import { router } from "expo-router";
|
||||||
@ -15,56 +16,59 @@ import {
|
|||||||
} from "react-native";
|
} from "react-native";
|
||||||
|
|
||||||
// Sample recipe data
|
// Sample recipe data
|
||||||
const recipeData = [
|
const foodHighlights = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: "Pad Kra Pao Moo Sab with Eggs",
|
name: "Pad Kra Pao Moo Sab with Eggs",
|
||||||
image:
|
image: require("@/assets/images/food/padkrapao.jpg"),
|
||||||
"/placeholder.svg?height=400&width=400&query=thai basil stir fry with egg and rice",
|
description: "Thai stir-fry with ground pork and holy basil",
|
||||||
color: "#ffd60a",
|
time: "30 Mins",
|
||||||
|
calories: "520 kcal",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
title: "Chicken Curry",
|
name: "Jjajangmyeon",
|
||||||
image:
|
image: require("@/assets/images/food/jjajangmyeon.jpg"),
|
||||||
"/placeholder.svg?height=400&width=400&query=chicken curry with rice",
|
description: "Korean black bean noodles",
|
||||||
color: "#ffd60a",
|
time: "45 Mins",
|
||||||
|
calories: "650 kcal",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
title: "Beef Steak",
|
name: "Ramen",
|
||||||
image:
|
image: require("@/assets/images/food/ramen.jpg"),
|
||||||
"/placeholder.svg?height=400&width=400&query=beef steak with vegetables",
|
description: "Japanese noodle soup",
|
||||||
color: "#bb0718",
|
time: "60 Mins",
|
||||||
|
calories: "480 kcal",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
title: "Vegetable Pasta",
|
name: "Beef Wellington",
|
||||||
image: "/placeholder.svg?height=400&width=400&query=vegetable pasta",
|
image: require("@/assets/images/food/beef.jpg"),
|
||||||
color: "#ffd60a",
|
description: "Tender beef wrapped in puff pastry",
|
||||||
},
|
time: "90 Mins",
|
||||||
{
|
calories: "750 kcal",
|
||||||
id: 5,
|
|
||||||
title: "Salmon Sushi",
|
|
||||||
image: "/placeholder.svg?height=400&width=400&query=salmon sushi",
|
|
||||||
color: "#ffd60a",
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const navigateToFoodDetail = (foodId: string) => {
|
||||||
|
router.push({ pathname: "/food/[id]", params: { id: foodId } });
|
||||||
|
};
|
||||||
|
|
||||||
export default function HomeScreen() {
|
export default function HomeScreen() {
|
||||||
const [searchQuery, setSearchQuery] = useState("");
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
const [filteredRecipes, setFilteredRecipes] = useState(recipeData);
|
const [filteredRecipes, setFilteredRecipes] = useState(foodHighlights);
|
||||||
|
|
||||||
// Handle search
|
// Handle search
|
||||||
const handleSearch = (text: string): void => {
|
const handleSearch = (text: string): void => {
|
||||||
setSearchQuery(text);
|
setSearchQuery(text);
|
||||||
if (text) {
|
if (text) {
|
||||||
const filtered = recipeData.filter((recipe: Recipe) =>
|
const filtered = foodHighlights.filter((food) =>
|
||||||
recipe.title.toLowerCase().includes(text.toLowerCase())
|
food.name.toLowerCase().includes(text.toLowerCase())
|
||||||
);
|
);
|
||||||
setFilteredRecipes(filtered);
|
setFilteredRecipes(filtered);
|
||||||
} else {
|
} else {
|
||||||
setFilteredRecipes(recipeData);
|
setFilteredRecipes(foodHighlights);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -214,45 +218,58 @@ export default function HomeScreen() {
|
|||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{/* Highlights Section */}
|
{/* Food Highlights Section */}
|
||||||
<View className="px-6 mb-6">
|
<View className="mx-4 mb-6">
|
||||||
<View className="flex-row items-center mb-4">
|
<View className="flex-row items-center mb-3">
|
||||||
<Text className="text-2xl font-bold mr-2">Highlights</Text>
|
<Text className="text-lg font-bold text-[#333] mr-2">
|
||||||
<FontAwesome name="star" size={20} color="#ffd60a" />
|
Food Highlights
|
||||||
|
</Text>
|
||||||
|
<IconSymbol name="star.fill" size={16} color="#FFCC00" />
|
||||||
</View>
|
</View>
|
||||||
|
<View className="w-full">
|
||||||
<ScrollView
|
{foodHighlights.map((food) => (
|
||||||
horizontal
|
|
||||||
showsHorizontalScrollIndicator={false}
|
|
||||||
className="mb-4"
|
|
||||||
>
|
|
||||||
<View className="flex-row">
|
|
||||||
{filteredRecipes.slice(0, 3).map((recipe) => (
|
|
||||||
<TouchableOpacity
|
|
||||||
key={recipe.id}
|
|
||||||
className={`w-36 h-40 bg-[${recipe.color}] rounded-xl mr-3 overflow-hidden`}
|
|
||||||
onPress={() => goToRecipeDetail(recipe)}
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
source={{ uri: recipe.image }}
|
|
||||||
className="w-full h-full opacity-70"
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
))}
|
|
||||||
</View>
|
|
||||||
</ScrollView>
|
|
||||||
|
|
||||||
<View className="flex-row">
|
|
||||||
{filteredRecipes.slice(3, 5).map((recipe) => (
|
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
key={recipe.id}
|
key={food.id}
|
||||||
className={`w-36 h-40 bg-[${recipe.color}] rounded-xl mr-3 overflow-hidden`}
|
className="flex-row bg-white rounded-xl mb-3 shadow-sm overflow-hidden"
|
||||||
onPress={() => goToRecipeDetail(recipe)}
|
style={{
|
||||||
|
shadowColor: "#000",
|
||||||
|
shadowOffset: { width: 0, height: 2 },
|
||||||
|
shadowOpacity: 0.1,
|
||||||
|
shadowRadius: 4,
|
||||||
|
elevation: 2,
|
||||||
|
}}
|
||||||
|
onPress={() => navigateToFoodDetail(String(food.id))}
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
source={{ uri: recipe.image }}
|
source={food.image}
|
||||||
className="w-full h-full opacity-70"
|
className="w-[88px] h-[88px] rounded-l-xl"
|
||||||
|
resizeMode="cover"
|
||||||
/>
|
/>
|
||||||
|
<View className="flex-1 p-3 justify-between">
|
||||||
|
<Text
|
||||||
|
className="text-base font-bold text-[#333] mb-1"
|
||||||
|
numberOfLines={1}
|
||||||
|
>
|
||||||
|
{food.name}
|
||||||
|
</Text>
|
||||||
|
<Text className="text-sm text-[#666] mb-2" numberOfLines={1}>
|
||||||
|
{food.description}
|
||||||
|
</Text>
|
||||||
|
<View className="flex-row justify-between">
|
||||||
|
<View className="flex-row items-center">
|
||||||
|
<IconSymbol name="clock" size={12} color="#666666" />
|
||||||
|
<Text className="text-xs text-[#666] ml-1">
|
||||||
|
{food.time}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<View className="flex-row items-center">
|
||||||
|
<IconSymbol name="flame" size={12} color="#666666" />
|
||||||
|
<Text className="text-xs text-[#666] ml-1">
|
||||||
|
{food.calories}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
))}
|
))}
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
@ -1,12 +1,118 @@
|
|||||||
import { Text, View } from "react-native";
|
"use client";
|
||||||
|
|
||||||
|
import { Image } from "expo-image";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { ScrollView, Text, TouchableOpacity, View } from "react-native";
|
||||||
|
import { SafeAreaView } from "react-native-safe-area-context";
|
||||||
|
|
||||||
export default function ProfileScreen() {
|
export default function ProfileScreen() {
|
||||||
|
const [activeTab, setActiveTab] = useState("Repost");
|
||||||
|
|
||||||
|
const foodItems = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "Padthaipro",
|
||||||
|
image: require("@/assets/images/food/padthai.jpg"),
|
||||||
|
color: "#FFCC00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "Jjajangmyeon",
|
||||||
|
image: require("@/assets/images/food/jjajangmyeon.jpg"),
|
||||||
|
color: "#FFA500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "Wingztab",
|
||||||
|
image: require("@/assets/images/food/wings.jpg"),
|
||||||
|
color: "#FFCC00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "Ramen",
|
||||||
|
image: require("@/assets/images/food/ramen.jpg"),
|
||||||
|
color: "#FFA500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: "Tiramisu",
|
||||||
|
image: require("@/assets/images/food/tiramisu.jpg"),
|
||||||
|
color: "#FFCC00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: "Beef wellington",
|
||||||
|
image: require("@/assets/images/food/beef.jpg"),
|
||||||
|
color: "#FFA500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
name: "Tiramisu",
|
||||||
|
image: require("@/assets/images/food/tiramisu.jpg"),
|
||||||
|
color: "#FFCC00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
name: "Beef wellington",
|
||||||
|
image: require("@/assets/images/food/beef.jpg"),
|
||||||
|
color: "#FFA500",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className="flex-1 items-center justify-center bg-white">
|
<SafeAreaView className="flex-1 bg-white" edges={["top"]}>
|
||||||
<Text className="text-2xl font-bold">Profile Screen</Text>
|
<ScrollView className="flex-1">
|
||||||
<Text className="mt-2 text-gray-500">
|
{/* Profile Header */}
|
||||||
Your profile information will appear here
|
<View className="items-center py-6">
|
||||||
</Text>
|
<View className="w-[100px] h-[100px] rounded-full border border-gray-300 justify-center items-center mb-3">
|
||||||
</View>
|
<View className="w-[96px] h-[96px] rounded-full bg-gray-100 justify-center items-center">
|
||||||
|
<Text className="text-5xl">👨🍳</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Text className="text-xl font-bold mb-3">Mr. Chef</Text>
|
||||||
|
<TouchableOpacity className="bg-red-600 py-2 px-10 rounded-lg">
|
||||||
|
<Text className="text-white font-bold">Edit</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Tab Navigation */}
|
||||||
|
<View className="flex-row justify-around py-3">
|
||||||
|
{["Repost", "Likes", "Bookmark"].map((tab) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={tab}
|
||||||
|
className={`py-2 px-4 ${
|
||||||
|
activeTab === tab ? "border-b-2 border-[#333]" : ""
|
||||||
|
}`}
|
||||||
|
onPress={() => setActiveTab(tab)}
|
||||||
|
>
|
||||||
|
<Text className="font-medium">{tab}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="h-px bg-[#EEEEEE] mx-4" />
|
||||||
|
|
||||||
|
{/* Food Grid */}
|
||||||
|
<View className="flex-row flex-wrap p-2">
|
||||||
|
{foodItems.map((item, index) => (
|
||||||
|
<View key={`${item.id}-${index}`} className="w-1/2 p-2 relative">
|
||||||
|
<Image
|
||||||
|
source={item.image}
|
||||||
|
className="w-full h-[120px] rounded-lg"
|
||||||
|
resizeMode="cover"
|
||||||
|
/>
|
||||||
|
<View
|
||||||
|
className="absolute bottom-4 left-4 py-1 px-2 rounded bg-opacity-90"
|
||||||
|
style={{ backgroundColor: item.color }}
|
||||||
|
>
|
||||||
|
<Text className="text-[#333] font-bold text-xs">
|
||||||
|
{item.name}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
</SafeAreaView>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,10 +1,101 @@
|
|||||||
import { Text, View } from "react-native";
|
import { IconSymbol } from "@/components/ui/IconSymbol";
|
||||||
|
import { Image } from "expo-image";
|
||||||
|
import {
|
||||||
|
ScrollView,
|
||||||
|
Text,
|
||||||
|
TextInput,
|
||||||
|
TouchableOpacity,
|
||||||
|
View,
|
||||||
|
} from "react-native";
|
||||||
|
import { SafeAreaView } from "react-native-safe-area-context";
|
||||||
|
|
||||||
export default function RecipesScreen() {
|
export default function RecipesScreen() {
|
||||||
|
const foodItems = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "Padthaipro",
|
||||||
|
image: require("@/assets/images/food/padthai.jpg"),
|
||||||
|
color: "#FFCC00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "Jjajangmyeon",
|
||||||
|
image: require("@/assets/images/food/jjajangmyeon.jpg"),
|
||||||
|
color: "#FFA500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "Wingztab",
|
||||||
|
image: require("@/assets/images/food/wings.jpg"),
|
||||||
|
color: "#FFCC00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "Ramen",
|
||||||
|
image: require("@/assets/images/food/ramen.jpg"),
|
||||||
|
color: "#FFA500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: "Tiramisu",
|
||||||
|
image: require("@/assets/images/food/tiramisu.jpg"),
|
||||||
|
color: "#FFCC00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: "Beef wellington",
|
||||||
|
image: require("@/assets/images/food/beef.jpg"),
|
||||||
|
color: "#FFA500",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className="flex-1 items-center justify-center bg-white">
|
<SafeAreaView className="flex-1 bg-white" edges={["top"]}>
|
||||||
<Text className="text-2xl font-bold">Recipes Screen</Text>
|
<ScrollView className="flex-1">
|
||||||
<Text className="mt-2 text-gray-500">Your recipes will appear here</Text>
|
{/* Search Bar */}
|
||||||
</View>
|
<View className="flex-row items-center mx-4 mt-2 mb-4 px-3 h-10 bg-white rounded-full border border-gray-300">
|
||||||
|
<IconSymbol name="magnifyingglass" size={20} color="#FF0000" />
|
||||||
|
<TextInput
|
||||||
|
className="flex-1 ml-2 text-[#333]"
|
||||||
|
placeholder="Search"
|
||||||
|
placeholderTextColor="#FF0000"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Filter Buttons */}
|
||||||
|
<View className="flex-row mx-4 mb-4">
|
||||||
|
<TouchableOpacity className="flex-1 bg-[#FFCC00] py-3 rounded-lg mr-2 items-center">
|
||||||
|
<Text className="font-bold text-[#333]">All Recipes</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity className="flex-1 bg-red-600 py-3 rounded-lg items-center">
|
||||||
|
<Text className="font-bold text-white">My Recipes</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Divider */}
|
||||||
|
<View className="h-px bg-[#EEEEEE] mx-4 mb-4" />
|
||||||
|
|
||||||
|
{/* Food Grid */}
|
||||||
|
<View className="flex-row flex-wrap p-2">
|
||||||
|
{foodItems.map((item) => (
|
||||||
|
<View key={item.id} className="w-1/2 p-2 relative">
|
||||||
|
<Image
|
||||||
|
source={item.image}
|
||||||
|
className="w-full h-[120px] rounded-lg"
|
||||||
|
resizeMode="cover"
|
||||||
|
/>
|
||||||
|
<View
|
||||||
|
className="absolute bottom-4 left-4 py-1 px-2 rounded bg-opacity-90"
|
||||||
|
style={{ backgroundColor: item.color }}
|
||||||
|
>
|
||||||
|
<Text className="text-[#333] font-bold text-xs">
|
||||||
|
{item.name}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
</SafeAreaView>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 113 KiB After Width: | Height: | Size: 650 KiB |
Loading…
Reference in New Issue
Block a user