From 23cf0f7997819816b80f30bc1ffd08fc782d9a34 Mon Sep 17 00:00:00 2001 From: Tantikon Phasanphaengsi Date: Thu, 8 May 2025 20:59:02 +0700 Subject: [PATCH] create home page --- app/(tabs)/forum.tsx | 10 +++ app/(tabs)/profile.tsx | 10 +++ app/(tabs)/recipes.tsx | 10 +++ app/recipe-detail.tsx | 140 +++++++++++++++++++++++++++++++++++++++++ babel.config.js | 9 +++ global.css | 3 + metro.config.js | 6 ++ nativewind-env.d.ts | 1 + tailwind.config.js | 16 +++++ 9 files changed, 205 insertions(+) create mode 100644 app/(tabs)/forum.tsx create mode 100644 app/(tabs)/profile.tsx create mode 100644 app/(tabs)/recipes.tsx create mode 100644 app/recipe-detail.tsx create mode 100644 babel.config.js create mode 100644 global.css create mode 100644 metro.config.js create mode 100644 nativewind-env.d.ts create mode 100644 tailwind.config.js diff --git a/app/(tabs)/forum.tsx b/app/(tabs)/forum.tsx new file mode 100644 index 0000000..f23e686 --- /dev/null +++ b/app/(tabs)/forum.tsx @@ -0,0 +1,10 @@ +import { View, Text } from 'react-native'; + +export default function ForumScreen() { + return ( + + Forum Screen + Discussions and community posts will appear here + + ); +} \ No newline at end of file diff --git a/app/(tabs)/profile.tsx b/app/(tabs)/profile.tsx new file mode 100644 index 0000000..37a6797 --- /dev/null +++ b/app/(tabs)/profile.tsx @@ -0,0 +1,10 @@ +import { View, Text } from 'react-native'; + +export default function ProfileScreen() { + return ( + + Profile Screen + Your profile information will appear here + + ); +} \ No newline at end of file diff --git a/app/(tabs)/recipes.tsx b/app/(tabs)/recipes.tsx new file mode 100644 index 0000000..31aae9f --- /dev/null +++ b/app/(tabs)/recipes.tsx @@ -0,0 +1,10 @@ +import { View, Text } from 'react-native'; + +export default function RecipesScreen() { + return ( + + Recipes Screen + Your recipes will appear here + + ); +} \ No newline at end of file diff --git a/app/recipe-detail.tsx b/app/recipe-detail.tsx new file mode 100644 index 0000000..19ddc47 --- /dev/null +++ b/app/recipe-detail.tsx @@ -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 ( + + + + + {/* Header with back and share buttons */} + + router.back()} + > + + + + + + + + + {/* Recipe Image */} + + + + + {/* Recipe Title and Description */} + + {recipeTitle} + + Pad kra pao, also written as pad gaprao, is a popular Thai stir fry of ground meat and holy basil. + + + {/* Recipe Info */} + + + Skills + Easy + + + + Time + 30 Mins + + + + Ingredients + 10+ + + + + Calories + 300 kCal + + + + {/* Ingredients */} + Ingredients + + + + + + + + + + + {/* Nutrition Info */} + + + + + 0 + /32g + + Fat + + + + + 0 + /32g + + Fiber + + + + + 0 + /32g + + Protein + + + + + 0 + /32g + + Carbs + + + + + + {/* Bottom Spacing */} + + + + {/* Cook Button */} + + + + Let's Cook! + + + + + + + ); +} \ No newline at end of file diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..577e38b --- /dev/null +++ b/babel.config.js @@ -0,0 +1,9 @@ +module.exports = function (api) { + api.cache(true); + return { + presets: [ + ["babel-preset-expo", { jsxImportSource: "nativewind" }], + "nativewind/babel", + ], + }; + }; \ No newline at end of file diff --git a/global.css b/global.css new file mode 100644 index 0000000..bd6213e --- /dev/null +++ b/global.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/metro.config.js b/metro.config.js new file mode 100644 index 0000000..37cbbed --- /dev/null +++ b/metro.config.js @@ -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' }) \ No newline at end of file diff --git a/nativewind-env.d.ts b/nativewind-env.d.ts new file mode 100644 index 0000000..fbca8c7 --- /dev/null +++ b/nativewind-env.d.ts @@ -0,0 +1 @@ +/// \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..f6807b2 --- /dev/null +++ b/tailwind.config.js @@ -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: [], +} \ No newline at end of file