resolve merge conflict, use nativewind style

Create placeholder-food.jpg

fix conflict code

app/(tabs)/_layout.tsx

@@ -66,7 +66,6 @@ export default function TabLayout() {
       />
 
       <Tabs.Screen
-        name="profile"
         name="profile"
         options={{
           title: "Profile",

app/(tabs)/forum.tsx

@@ -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() {
   return (
-    <View className="flex-1 items-center justify-center bg-white">
-      <Text className="text-2xl font-bold">Forum Screen</Text>
-      <Text className="mt-2 text-gray-500">
-        Discussions and community posts will appear here
-      </Text>
-    </View>
+    <SafeAreaView style={styles.container} edges={["top"]}>
+      <ScrollView style={styles.scrollView}>
+        {/* Search Bar */}
+        <View style={styles.searchContainer}>
+          <IconSymbol name="magnifyingglass" size={20} color="#FF0000" />
+          <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",
+  },
+});

app/(tabs)/index.tsx

@@ -1,3 +1,4 @@
+import { IconSymbol } from "@/components/ui/IconSymbol";
 import { Feather, FontAwesome, Ionicons } from "@expo/vector-icons";
 import * as ImagePicker from "expo-image-picker";
 import { router } from "expo-router";
@@ -15,56 +16,59 @@ import {
 } from "react-native";
 
 // Sample recipe data
-const recipeData = [
+const foodHighlights = [
   {
     id: 1,
-    title: "Pad Kra Pao Moo Sab with Eggs",
-    image:
-      "/placeholder.svg?height=400&width=400&query=thai basil stir fry with egg and rice",
-    color: "#ffd60a",
+    name: "Pad Kra Pao Moo Sab with Eggs",
+    image: require("@/assets/images/food/padkrapao.jpg"),
+    description: "Thai stir-fry with ground pork and holy basil",
+    time: "30 Mins",
+    calories: "520 kcal",
   },
   {
     id: 2,
-    title: "Chicken Curry",
-    image:
-      "/placeholder.svg?height=400&width=400&query=chicken curry with rice",
-    color: "#ffd60a",
+    name: "Jjajangmyeon",
+    image: require("@/assets/images/food/jjajangmyeon.jpg"),
+    description: "Korean black bean noodles",
+    time: "45 Mins",
+    calories: "650 kcal",
   },
   {
     id: 3,
-    title: "Beef Steak",
-    image:
-      "/placeholder.svg?height=400&width=400&query=beef steak with vegetables",
-    color: "#bb0718",
+    name: "Ramen",
+    image: require("@/assets/images/food/ramen.jpg"),
+    description: "Japanese noodle soup",
+    time: "60 Mins",
+    calories: "480 kcal",
   },
   {
     id: 4,
-    title: "Vegetable Pasta",
-    image: "/placeholder.svg?height=400&width=400&query=vegetable pasta",
-    color: "#ffd60a",
-  },
-  {
-    id: 5,
-    title: "Salmon Sushi",
-    image: "/placeholder.svg?height=400&width=400&query=salmon sushi",
-    color: "#ffd60a",
+    name: "Beef Wellington",
+    image: require("@/assets/images/food/beef.jpg"),
+    description: "Tender beef wrapped in puff pastry",
+    time: "90 Mins",
+    calories: "750 kcal",
   },
 ];
 
+const navigateToFoodDetail = (foodId: string) => {
+  router.push({ pathname: "/food/[id]", params: { id: foodId } });
+};
+
 export default function HomeScreen() {
   const [searchQuery, setSearchQuery] = useState("");
-  const [filteredRecipes, setFilteredRecipes] = useState(recipeData);
+  const [filteredRecipes, setFilteredRecipes] = useState(foodHighlights);
 
   // Handle search
   const handleSearch = (text: string): void => {
     setSearchQuery(text);
     if (text) {
-      const filtered = recipeData.filter((recipe: Recipe) =>
-        recipe.title.toLowerCase().includes(text.toLowerCase())
+      const filtered = foodHighlights.filter((food) =>
+        food.name.toLowerCase().includes(text.toLowerCase())
       );
       setFilteredRecipes(filtered);
     } else {
-      setFilteredRecipes(recipeData);
+      setFilteredRecipes(foodHighlights);
     }
   };
 
@@ -214,45 +218,58 @@ export default function HomeScreen() {
           </View>
         </View>
 
-        {/* Highlights Section */}
-        <View className="px-6 mb-6">
-          <View className="flex-row items-center mb-4">
-            <Text className="text-2xl font-bold mr-2">Highlights</Text>
-            <FontAwesome name="star" size={20} color="#ffd60a" />
+        {/* Food Highlights Section */}
+        <View className="mx-4 mb-6">
+          <View className="flex-row items-center mb-3">
+            <Text className="text-lg font-bold text-[#333] mr-2">
+              Food Highlights
+            </Text>
+            <IconSymbol name="star.fill" size={16} color="#FFCC00" />
           </View>
-
-          <ScrollView
-            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) => (
+          <View className="w-full">
+            {foodHighlights.map((food) => (
               <TouchableOpacity
-                key={recipe.id}
-                className={`w-36 h-40 bg-[${recipe.color}] rounded-xl mr-3 overflow-hidden`}
-                onPress={() => goToRecipeDetail(recipe)}
+                key={food.id}
+                className="flex-row bg-white rounded-xl mb-3 shadow-sm overflow-hidden"
+                style={{
+                  shadowColor: "#000",
+                  shadowOffset: { width: 0, height: 2 },
+                  shadowOpacity: 0.1,
+                  shadowRadius: 4,
+                  elevation: 2,
+                }}
+                onPress={() => navigateToFoodDetail(String(food.id))}
               >
                 <Image
-                  source={{ uri: recipe.image }}
-                  className="w-full h-full opacity-70"
+                  source={food.image}
+                  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>
             ))}
           </View>

app/(tabs)/profile.tsx

@@ -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() {
+  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 (
-    <View className="flex-1 items-center justify-center bg-white">
-      <Text className="text-2xl font-bold">Profile Screen</Text>
-      <Text className="mt-2 text-gray-500">
-        Your profile information will appear here
-      </Text>
-    </View>
+    <SafeAreaView className="flex-1 bg-white" edges={["top"]}>
+      <ScrollView className="flex-1">
+        {/* Profile Header */}
+        <View className="items-center py-6">
+          <View className="w-[100px] h-[100px] rounded-full border border-gray-300 justify-center items-center mb-3">
+            <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>
   );
 }

app/(tabs)/recipes.tsx

@@ -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() {
+  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 (
-    <View className="flex-1 items-center justify-center bg-white">
-      <Text className="text-2xl font-bold">Recipes Screen</Text>
-      <Text className="mt-2 text-gray-500">Your recipes will appear here</Text>
-    </View>
+    <SafeAreaView className="flex-1 bg-white" edges={["top"]}>
+      <ScrollView className="flex-1">
+        {/* Search Bar */}
+        <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>
   );
 }