diff --git a/App.tsx b/App.tsx index e2cd737..22ebe91 100644 --- a/App.tsx +++ b/App.tsx @@ -1,42 +1,23 @@ import React from 'react'; -import { Image, Text, View } from 'react-native'; -import { styles } from './styles'; +import { NavigationContainer } from '@react-navigation/native'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import ContactPage from './src/screens/contactPage'; +import SearchScreen from './src/screens/searchScreen'; -export default function App() { - return ( - - - - - - Contact Us - - +export type RootStackParamList = { + Search: undefined; + Contact: undefined; +}; - - - IconPlaceholder - - - 123 Berkeley Way, San Jose, CA 95035 - +const Stack = createNativeStackNavigator(); - - IconPlaceholder - - Nursery Manager - 123 - 456 - 7890 - - - IconPlaceholder - - nurserymanager@ourcityforest.org - - +export default function App() { + return ( + + + + + + ); } diff --git a/src/screens/contactPage.tsx b/src/screens/contactPage.tsx new file mode 100644 index 0000000..c932ae9 --- /dev/null +++ b/src/screens/contactPage.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { Image, ScrollView, Text, View } from 'react-native'; +import { styles } from './styles/styles'; + +export default function App() { + return ( + + + + + + + + + + Contact Us + + + Location + + 123 Berkeley Way, San Jose, CA 95035 + + + + + Hours + M-TH | 9 AM - 12 PM + + + + Call + 123 - 456 - 7890 + + + + Email + + nurserymanager@ourcityforest.org + + + + + Instagram - Facebook + + + + ); +} diff --git a/src/screens/searchScreen.tsx b/src/screens/searchScreen.tsx new file mode 100644 index 0000000..8ac1f6d --- /dev/null +++ b/src/screens/searchScreen.tsx @@ -0,0 +1,72 @@ +import React, { useEffect, useState } from 'react'; +import { + FlatList, + ImageBackground, + ScrollView, + Text, + TouchableOpacity, + View, +} from 'react-native'; +import { NativeStackScreenProps } from '@react-navigation/native-stack'; +import { RootStackParamList } from '../../App'; +import { fetchTreeData } from '../supabase/client'; +import { styles } from './styles/styles'; + +type SearchScreenProps = NativeStackScreenProps; + +export default function SearchScreen({ navigation }: SearchScreenProps) { + const [trees, setTrees] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + const loadTreeData = async () => { + const treeData = await fetchTreeData(); + console.log('Fetched trees:', treeData); + if (treeData) { + setTrees(treeData); + } + setLoading(false); + }; + + loadTreeData(); + }, []); + + const renderTreeCard = ({ item }: { item: any }) => ( + + + + + {item.species} + + Row {item.row} + • + Bank {item.bank} + + + + + ); + + return ( + + navigation.navigate('Contact')}> + Contact Us + + + + Trees Availibility + + item.tree_id.toString()} + /> + + + ); +} diff --git a/src/screens/styles/styles.ts b/src/screens/styles/styles.ts new file mode 100644 index 0000000..38f432e --- /dev/null +++ b/src/screens/styles/styles.ts @@ -0,0 +1,135 @@ +import { StyleSheet } from 'react-native'; + +export const styles = StyleSheet.create({ + backgroundContainer: { + flexGrow: 1, + flexDirection: 'column', + backgroundColor: 'white', + }, + + searchContainer: { + paddingTop: 32, + paddingLeft: 27, + paddingRight: 27, + }, + + Heading4Contact: { + // change this later + color: '#333', + fontSize: 24, + fontWeight: '700', + paddingBottom: 30, + textAlign: 'left', + }, + + Heading4Search: { + // change this later + color: '#446127', + fontSize: 32, + fontWeight: '700', + paddingBottom: 10, + textAlign: 'left', + }, + + imageContainer: { + width: '100%', + aspectRatio: 8 / 9, + position: 'relative', + top: 0, + left: 0, + }, + + contactImage: { + width: '100%', + height: '70%', + resizeMode: 'cover', + }, + + contactOverlay: { + position: 'absolute', + top: 0, + bottom: 0, + left: 0, + right: 0, + backgroundColor: 'rgba(0, 0, 0, 0.5)', + }, + + contactInfo: { + position: 'absolute', + width: '100%', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: 'white', + borderRadius: 20, + marginTop: 250, + padding: 40, + }, + + contactText: { + // change this later + color: '#4F4F4F', + fontSize: 16, + paddingBottom: 40, + textAlign: 'center', + }, + + contactboldText: { + // change this later + color: '#4F4F4F', + fontSize: 18, + paddingBottom: 10, + fontWeight: 'bold', + textAlign: 'center', + }, + + iconColor: { + color: '#446127', + paddingBottom: 20, + textAlign: 'center', + }, + + treeRow: { + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'flex-start', + alignItems: 'flex-start', + padding: 10, + }, + + treeCard: { + width: 160, + height: 182, + flexShrink: 0, + borderRadius: 5, + justifyContent: 'space-between', + overflow: 'hidden', + }, + + treeImage: { + width: 160, + height: 135, + flexShrink: 0, + borderRadius: 5, + resizeMode: 'cover', + backgroundColor: 'grey', + }, + + treeDetails: { + alignItems: 'flex-start', + overflow: 'hidden', + flexDirection: 'row', + }, + + treeName: { + // change this later + flexShrink: 1, + fontSize: 18, + fontWeight: 'bold', + }, + + treeInfo: { + // change this later + fontSize: 14, + fontWeight: 'medium', + }, +}); diff --git a/src/supabase/client.ts b/src/supabase/client.ts index 4e24612..043ba27 100644 --- a/src/supabase/client.ts +++ b/src/supabase/client.ts @@ -7,3 +7,16 @@ const SUPABASE_ANON_KEY = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!; // Create a single Supabase client instance export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY); + +export const fetchTreeData = async () => { + try { + const { data, error } = await supabase.from('trees').select('*'); + + if (error) throw error; + + return data; + } catch (error) { + console.error('Error fetching tree data:', error); + return null; + } +};