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,14 @@
+import * as React from 'react';
+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,51 @@
+import React, { useEffect, useState } from 'react';
+import { 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>
+  );
+}

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,34 +1,22 @@
-import React, { useEffect, useState } from 'react';
-import { Button, Text, View } from 'react-native';
-import { getSeekHelpData } from '@/supabase/queries/generalQueries';
-import { Resource } from '@/types/types';
-
-export default function SeekHelp() {
-  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);
-    }
-  };
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { styles } from './styles';
 
+export default function SeekHelp({ navigation }: { navigation: any }) {
   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 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>
   );
 }

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

src/types/types 2.tsx

@@ -0,0 +1,4 @@
+export interface Resource {
+  summary: string;
+  [key: string]: any;
+}