updated contact page

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 (
-    <View style={styles.container}>
-      <View style={styles.imageContainer}>
-        <Image
-          source={{
-            uri: 'https://images.squarespace-cdn.com/content/v1/545bbd7ee4b032c1794c4020/1502738972151-U1234630JTWT5NEITDFG/image-asset.jpeg?format=1500w',
-          }}
-          style={styles.responsiveImage}
-        />
-
-        <View style={styles.overlay}>
-          <Text style={styles.Heading4}>Contact Us</Text>
-        </View>
-      </View>
+export type RootStackParamList = {
+  Search: undefined;
+  Contact: undefined;
+};
 
-      <View style={styles.contactInfo}>
-        <View>
-          <Text style={styles.iconColor}> IconPlaceholder</Text>
-        </View>
-        <Text style={styles.contactText}>
-          123 Berkeley Way, San Jose, CA 95035
-        </Text>
+const Stack = createNativeStackNavigator<RootStackParamList>();
 
-        <View>
-          <Text style={styles.iconColor}> IconPlaceholder</Text>
-        </View>
-        <Text style={styles.managerText}>Nursery Manager</Text>
-        <Text style={styles.contactText}>123 - 456 - 7890</Text>
-
-        <View>
-          <Text style={styles.iconColor}> IconPlaceholder</Text>
-        </View>
-        <Text style={styles.contactText}>[email protected]</Text>
-      </View>
-    </View>
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Search">
+        <Stack.Screen name="Search" component={SearchScreen} />
+        <Stack.Screen name="Contact" component={ContactPage} />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 }

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 (
+    <ScrollView style={styles.backgroundContainer}>
+      <View style={styles.imageContainer}>
+        <Image
+          source={{
+            uri: 'https://images.squarespace-cdn.com/content/v1/545bbd7ee4b032c1794c4020/1502738972151-U1234630JTWT5NEITDFG/image-asset.jpeg?format=1500w',
+          }}
+          style={styles.contactImage}
+        />
+
+        <View style={styles.contactOverlay}></View>
+      </View>
+
+      <View style={styles.contactInfo}>
+        <View>
+          <Text style={styles.Heading4Contact}>Contact Us</Text>
+        </View>
+        <View>
+          <Text style={styles.contactboldText}>Location</Text>
+          <Text style={styles.contactText}>
+            123 Berkeley Way, San Jose, CA 95035
+          </Text>
+        </View>
+
+        <View>
+          <Text style={styles.contactboldText}>Hours</Text>
+          <Text style={styles.contactText}>M-TH | 9 AM - 12 PM</Text>
+        </View>
+
+        <View>
+          <Text style={styles.contactboldText}>Call</Text>
+          <Text style={styles.contactText}>123 - 456 - 7890</Text>
+        </View>
+
+        <View>
+          <Text style={styles.contactboldText}>Email</Text>
+          <Text style={styles.contactText}>
+            [email protected]
+          </Text>
+        </View>
+
+        <View>
+          <Text style={styles.contactText}>Instagram - Facebook</Text>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}

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<RootStackParamList, 'Search'>;
+
+export default function SearchScreen({ navigation }: SearchScreenProps) {
+  const [trees, setTrees] = useState<any[]>([]);
+  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 }) => (
+    <View style={styles.treeRow}>
+      <View style={styles.treeCard}>
+        <ImageBackground
+          source={{
+            uri: item.image_url || 'https://example.com/placeholder-image.jpg',
+          }}
+          style={styles.treeImage}
+        ></ImageBackground>
+        <View>
+          <Text style={styles.treeName}>{item.species}</Text>
+          <View style={styles.treeDetails}>
+            <Text style={styles.treeInfo}>Row {item.row}</Text>
+            <Text style={styles.treeInfo}> • </Text>
+            <Text style={styles.treeInfo}>Bank {item.bank}</Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+
+  return (
+    <ScrollView style={styles.backgroundContainer}>
+      <TouchableOpacity onPress={() => navigation.navigate('Contact')}>
+        <Text>Contact Us</Text>
+      </TouchableOpacity>
+
+      <View style={styles.searchContainer}>
+        <Text style={styles.Heading4Search}>Trees Availibility</Text>
+
+        <FlatList
+          data={trees}
+          renderItem={renderTreeCard}
+          keyExtractor={item => item.tree_id.toString()}
+        />
+      </View>
+    </ScrollView>
+  );
+}

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',
+  },
+});

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;
+  }
+};