5 create resources sub pages

App.tsx

@@ -6,6 +6,7 @@ import Home from '@/screens/Home';
 import LegalRights from '@/screens/LegalRights/index';
 import VideoPage from '@/screens/LegalRights/VideoPage';
 import SeekHelp from '@/screens/SeekHelp';
+import resourceList from '@/screens/SeekHelp/ResourceList';
 
 const Stack = createNativeStackNavigator();
 
@@ -17,6 +18,7 @@ export default function App() {
         <Stack.Screen name="Healing Resources" component={HealingResources} />
         <Stack.Screen name="Legal Rights" component={LegalRights} />
         <Stack.Screen name="Seek Help" component={SeekHelp} />
+        <Stack.Screen name="Resource List" component={resourceList} />
         <Stack.Screen name="Video Page" component={VideoPage} />
       </Stack.Navigator>
     </NavigationContainer>

src/navigation/seekHelpNav.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import SeekHelp from '@/screens/SeekHelp';
+import ResourceList from '@/screens/SeekHelp/ResourceList';
+
+const Stack = createNativeStackNavigator();
+export default function seekHelpNav() {
+  return (
+    <Stack.Navigator initialRouteName="Home">
+      <Stack.Screen name="Resource List" component={ResourceList} />
+      <Stack.Screen name="Seek Help" component={SeekHelp} />
+    </Stack.Navigator>
+  );
+}

src/screens/SeekHelp/ResourceList/index.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, TouchableOpacity, View } from 'react-native';
+import { getSeekHelpData } from '@/supabase/queries/generalQueries';
+import { Resource } from '@/types/types';
+import { styles } from './styles';
+
+export default function ResourceList() {
+  const filters = [
+    'General Resources',
+    'Health Organizations',
+    'LGBT Organizations',
+    'Legal Services',
+    'Government Resources',
+  ];
+  const [summaries, setSummaries] = useState<Resource[]>([]);
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    try {
+      const data = await getSeekHelpData();
+      setSummaries(data);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  };
+  return (
+    <View style={styles.container}>
+      <View style={styles.leftPanel}>
+        {filters.map((filter, index) => (
+          <TouchableOpacity key={index} style={styles.filterButton}>
+            <Text>{filter}</Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <View style={styles.rightPanel}>
+        <View>
+          {summaries.length > 0 ? (
+            summaries.map((resource, index) => (
+              <Text key={index}>{resource.summary}</Text>
+            ))
+          ) : (
+            <Text>Loading...</Text>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+// return(
+//   <View style={styles.container}>
+
+//     <View style={styles.leftPanel}>
+//       <Button title="General Resources" />
+//       <Button title="Health Organizations" />
+//       <Button title="LGBT Organizations"  />
+//       <Button title="Legal Services" />
+//       <Button title="Government Resources" />
+//     </View>
+
+//     <View style={styles.rightPanel}>
+//       <Button title="Resource 1" />
+//       <Button title="Resource 2" />
+//       <Button title="Resource 3" />
+//     </View>
+//   </View>
+// )
+
+/*
+const [summaries, setSummaries] = useState<Resource[]>([]);
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    try {
+      const data = await getSeekHelpData();
+      setSummaries(data);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  };
+
+  return (
+    <View>
+      <Button title="Fetch Data" onPress={fetchData} />
+      {summaries.length > 0 ? (
+        summaries.map((resource, index) => (
+          <Text key={index}>{resource.summary}</Text>
+        ))
+      ) : (
+        <Text>Loading...</Text>
+      )}
+    </View>
+  );
+}
+*/

src/screens/SeekHelp/ResourceList/styles.ts

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    marginTop: 10,
+    padding: 30,
+  },
+  leftPanel: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    width: '25%',
+    paddingRight: 20,
+  },
+  rightPanel: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '75%',
+    backgroundColor: '#f8f8f8',
+    padding: 10,
+  },
+  filterButton: {
+    backgroundColor: '#e8e8e8',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 5,
+    marginVertical: 10,
+    paddingVertical: 15,
+    width: '100%',
+  },
+  buttonText: {
+    fontSize: 16,
+    color: '#333',
+  },
+});

src/screens/SeekHelp/index.tsx

@@ -1,9 +1,40 @@
-import React, { useEffect, useState } from 'react';
-import { Button, Text, View } from 'react-native';
-import { getSeekHelpData } from '@/supabase/queries/generalQueries';
-import { Resource } from '@/types/types';
+// import React, { useEffect, useState } from 'react';
+// import { Button, Text, View } from 'react-native';
+// import styles from './styles';
 
-export default function SeekHelp() {
+// export default function SeekHelp({ navigation }: { navigation: any }) {
+//   return(
+//     <View style={styles.buttonContainer}>
+//       <Button title='State Resources' onPress={() => navigation.navigate('Resource List')} />
+//       <Button title='National Resources' onPress={() => navigation.navigate('Resource List')} />
+//     </View>
+//   )
+// }
+
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { styles } from './styles'; // Make sure this is the correct path
+
+export default function SeekHelp({ navigation }: { navigation: any }) {
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => navigation.navigate('Resource List')}
+      >
+        <Text style={styles.buttonText}>California</Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => navigation.navigate('Resource List')}
+      >
+        <Text style={styles.buttonText}>National</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+/*
   const [summaries, setSummaries] = useState<Resource[]>([]);
 
   useEffect(() => {
@@ -32,3 +63,4 @@ export default function SeekHelp() {
     </View>
   );
 }
+  */

src/screens/SeekHelp/styles.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 10,
+    padding: 30,
+  },
+  button: {
+    backgroundColor: '#e8e8e8',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 5,
+    marginVertical: 10,
+    paddingVertical: 15,
+    width: '100%',
+  },
+  buttonText: {
+    fontSize: 18,
+    color: '#333',
+    fontWeight: '500',
+  },
+});