mirror of
https://github.com/Sosokker/chefhai.git
synced 2025-12-19 05:54:08 +01:00
create home page
This commit is contained in:
Tantikon Phasanphaengsi
parent
d074115a71
commit
23cf0f7997
10
app/(tabs)/forum.tsx
Normal file
10
app/(tabs)/forum.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import { View, Text } from 'react-native';
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
10
app/(tabs)/profile.tsx
Normal file
10
app/(tabs)/profile.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import { View, Text } from 'react-native';
|
||||
|
||||
export default function ProfileScreen() {
|
||||
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>
|
||||
);
|
||||
}
|
||||
10
app/(tabs)/recipes.tsx
Normal file
10
app/(tabs)/recipes.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import { View, Text } from 'react-native';
|
||||
|
||||
export default function RecipesScreen() {
|
||||
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>
|
||||
);
|
||||
}
|
||||
140
app/recipe-detail.tsx
Normal file
140
app/recipe-detail.tsx
Normal file
@ -0,0 +1,140 @@
|
||||
import React from 'react';
|
||||
import { View, Text, Image, TouchableOpacity, ScrollView, SafeAreaView, StatusBar } from 'react-native';
|
||||
import { Feather, FontAwesome5 } from '@expo/vector-icons';
|
||||
import { useLocalSearchParams, router } from 'expo-router';
|
||||
|
||||
export default function RecipeDetailScreen() {
|
||||
const { title, image } = useLocalSearchParams();
|
||||
|
||||
const recipeTitle = title || "Pad Kra Pao Moo Sab with Eggs";
|
||||
const recipeImage = typeof image === 'string' ? image : "/placeholder.svg?height=400&width=400&query=thai basil stir fry with egg and rice";
|
||||
|
||||
return (
|
||||
<SafeAreaView className="flex-1 bg-white">
|
||||
<StatusBar barStyle="dark-content" />
|
||||
|
||||
<ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
|
||||
{/* Header with back and share buttons */}
|
||||
<View className="flex-row justify-between items-center px-4 pt-4 absolute z-10 w-full">
|
||||
<TouchableOpacity
|
||||
className="bg-[#ffd60a] p-3 rounded-lg"
|
||||
onPress={() => router.back()}
|
||||
>
|
||||
<Feather name="arrow-left" size={24} color="#bb0718" />
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity className="bg-white p-3 rounded-lg">
|
||||
<Feather name="send" size={24} color="#ffd60a" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Recipe Image */}
|
||||
<View className="items-center justify-center pt-16 pb-6">
|
||||
<Image
|
||||
source={{ uri: recipeImage }}
|
||||
className="w-72 h-72 rounded-full"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Recipe Title and Description */}
|
||||
<View className="px-6">
|
||||
<Text className="text-4xl font-bold">{recipeTitle}</Text>
|
||||
<Text className="text-gray-600 mt-2 text-lg">
|
||||
Pad kra pao, also written as pad gaprao, is a popular Thai stir fry of ground meat and holy basil.
|
||||
</Text>
|
||||
|
||||
{/* Recipe Info */}
|
||||
<View className="flex-row justify-between mt-8">
|
||||
<View>
|
||||
<Text className="text-2xl font-bold">Skills</Text>
|
||||
<Text className="text-gray-600 mt-1">Easy</Text>
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<Text className="text-2xl font-bold">Time</Text>
|
||||
<Text className="text-gray-600 mt-1">30 Mins</Text>
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<Text className="text-2xl font-bold">Ingredients</Text>
|
||||
<Text className="text-gray-600 mt-1">10+</Text>
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<Text className="text-2xl font-bold">Calories</Text>
|
||||
<Text className="text-gray-600 mt-1">300 kCal</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Ingredients */}
|
||||
<Text className="text-3xl font-bold mt-12">Ingredients</Text>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
className="mt-6 mb-4"
|
||||
contentContainerStyle={{ paddingLeft: 4, paddingRight: 20 }}
|
||||
>
|
||||
<View className="flex-row space-x-6">
|
||||
<View className="w-24 h-24 bg-gray-300 rounded-lg" />
|
||||
<View className="w-24 h-24 bg-gray-300 rounded-lg" />
|
||||
<View className="w-24 h-24 bg-gray-300 rounded-lg" />
|
||||
<View className="w-24 h-24 bg-gray-300 rounded-lg" />
|
||||
<View className="w-24 h-24 bg-gray-300 rounded-lg" />
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* Nutrition Info */}
|
||||
<View className="bg-[#ffd60a] rounded-lg p-6 mt-10">
|
||||
<View className="flex-row justify-between">
|
||||
<View className="items-center">
|
||||
<View className="w-16 h-16 rounded-full border-4 border-[#397e36] items-center justify-center">
|
||||
<Text className="text-xl font-bold">0</Text>
|
||||
<Text className="text-xs">/32g</Text>
|
||||
</View>
|
||||
<Text className="mt-2 font-semibold">Fat</Text>
|
||||
</View>
|
||||
|
||||
<View className="items-center">
|
||||
<View className="w-16 h-16 rounded-full border-4 border-[#397e36] items-center justify-center">
|
||||
<Text className="text-xl font-bold">0</Text>
|
||||
<Text className="text-xs">/32g</Text>
|
||||
</View>
|
||||
<Text className="mt-2 font-semibold">Fiber</Text>
|
||||
</View>
|
||||
|
||||
<View className="items-center">
|
||||
<View className="w-16 h-16 rounded-full border-4 border-[#a07d1a] items-center justify-center">
|
||||
<Text className="text-xl font-bold">0</Text>
|
||||
<Text className="text-xs">/32g</Text>
|
||||
</View>
|
||||
<Text className="mt-2 font-semibold">Protein</Text>
|
||||
</View>
|
||||
|
||||
<View className="items-center">
|
||||
<View className="w-16 h-16 rounded-full border-4 border-[#c87a20] items-center justify-center">
|
||||
<Text className="text-xl font-bold">0</Text>
|
||||
<Text className="text-xs">/32g</Text>
|
||||
</View>
|
||||
<Text className="mt-2 font-semibold">Carbs</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Bottom Spacing */}
|
||||
<View className="h-28" />
|
||||
</ScrollView>
|
||||
|
||||
{/* Cook Button */}
|
||||
<View className="absolute bottom-0 left-0 right-0">
|
||||
<View className="bg-[#bb0718] py-4 items-center">
|
||||
<View className="flex-row items-center">
|
||||
<Text className="text-[#ffd60a] text-2xl font-bold mr-2">Let's Cook!</Text>
|
||||
<FontAwesome5 name="utensils" size={24} color="#ffd60a" />
|
||||
</View>
|
||||
</View>
|
||||
<View className="bg-[#ffd60a] h-16" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 50, borderBottomRightRadius: 50 }} />
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
9
babel.config.js
Normal file
9
babel.config.js
Normal file
@ -0,0 +1,9 @@
|
||||
module.exports = function (api) {
|
||||
api.cache(true);
|
||||
return {
|
||||
presets: [
|
||||
["babel-preset-expo", { jsxImportSource: "nativewind" }],
|
||||
"nativewind/babel",
|
||||
],
|
||||
};
|
||||
};
|
||||
3
global.css
Normal file
3
global.css
Normal file
@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
6
metro.config.js
Normal file
6
metro.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
const { getDefaultConfig } = require("expo/metro-config");
|
||||
const { withNativeWind } = require('nativewind/metro');
|
||||
|
||||
const config = getDefaultConfig(__dirname)
|
||||
|
||||
module.exports = withNativeWind(config, { input: './global.css' })
|
||||
1
nativewind-env.d.ts
vendored
Normal file
1
nativewind-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="nativewind/types" />
|
||||
16
tailwind.config.js
Normal file
16
tailwind.config.js
Normal file
@ -0,0 +1,16 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
// NOTE: Update this to include the paths to all of your component files.
|
||||
content: ["./app/**/*.{js,jsx,ts,tsx}"],
|
||||
presets: [require("nativewind/preset")],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "#ffd60a",
|
||||
secondary: "#f9be25",
|
||||
accent: "#bb0718",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user