rearrange element

This commit is contained in:
Tantikon Phasanphaengsi 2025-05-08 21:03:37 +07:00
parent 23cf0f7997
commit 277b113180

View File

@ -147,60 +147,6 @@ export default function HomeScreen() {
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: 100 }} contentContainerStyle={{ paddingBottom: 100 }}
> >
{/* Center Image */}
<View className="items-center justify-center my-8">
<View className="w-32 h-32 items-center justify-center bg-[#fff5e6] rounded-full">
<View className="flex-row items-center">
<View className="absolute flex-row">
<Image
source={{ uri: "/placeholder.svg?height=60&width=60&query=orange fruit with green leaf" }}
className="w-14 h-14"
/>
</View>
</View>
</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" />
</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) => (
<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>
</View>
{/* Show your dishes */} {/* Show your dishes */}
<View className="px-6 mb-6"> <View className="px-6 mb-6">
<View className="flex-row items-center mb-4"> <View className="flex-row items-center mb-4">
@ -245,6 +191,46 @@ export default function HomeScreen() {
</View> </View>
</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" />
</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) => (
<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>
</View>
{/* Extra space at bottom */} {/* Extra space at bottom */}
<View className="h-20"></View> <View className="h-20"></View>
</ScrollView> </ScrollView>