done seekHelp midfi

package.json

@@ -19,16 +19,19 @@
     "@react-navigation/material-bottom-tabs": "^6.2.29",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",
+    "@rneui/base": "^4.0.0-rc.7",
+    "@rneui/themed": "^4.0.0-rc.8",
     "@supabase/supabase-js": "^2.45.6",
     "expo": "~51.0.21",
+    "expo-av": "~14.0.7",
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-native": "^0.74.5",
+    "react-native-elements": "^3.4.3",
     "react-native-paper": "^5.12.5",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
-    "react-native-video": "^6.6.4",
-    "expo-av": "~14.0.7"
+    "react-native-video": "^6.6.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/components/Resource/Resource.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { ListItem } from '@rneui/themed';
+import { SeekHelpProps } from '@/types/types';
+import { styles } from './styles';
+
+export default function ResourceT({
+  org_name,
+  summary,
+  address,
+  phone_number,
+  office_hours,
+}: SeekHelpProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <View style={styles.resourceCard}>
+      <ListItem.Accordion
+        content={
+          <TouchableOpacity
+            style={styles.headerContent}
+            onPress={() => setExpanded(!expanded)}
+          >
+            <Text style={styles.orgName}>{org_name}</Text>
+            {!expanded && (
+              <Text style={styles.summaryPreview}>
+                {summary.slice(0, 60)}...
+              </Text>
+            )}
+          </TouchableOpacity>
+        }
+        isExpanded={expanded}
+        onPress={() => setExpanded(!expanded)} // Handles toggling when header is pressed
+        containerStyle={{ padding: 0 }}
+      >
+        {expanded && (
+          <TouchableOpacity
+            style={styles.expandedContent}
+            onPress={() => setExpanded(false)} // Collapses content when expanded section is pressed
+          >
+            <Text style={styles.summary}>{summary}</Text>
+
+            <View style={styles.infoContainer}>
+              <Text style={styles.label}>Address:</Text>
+              <Text style={styles.info}>{address}</Text>
+            </View>
+
+            <View style={styles.infoContainer}>
+              <Text style={styles.label}>Office:</Text>
+              <Text style={styles.info}>{phone_number}</Text>
+            </View>
+
+            <View style={styles.infoContainer}>
+              <Text style={styles.label}>Office Hours:</Text>
+              <Text style={styles.info}>{office_hours}</Text>
+            </View>
+          </TouchableOpacity>
+        )}
+      </ListItem.Accordion>
+    </View>
+  );
+}

src/components/Resource/styles.tsx

@@ -0,0 +1,49 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  resourceCard: {
+    backgroundColor: '#fff',
+    borderRadius: 10,
+    padding: 15,
+    margin: 20,
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowRadius: 5,
+    shadowOffset: { width: 0, height: 2 },
+  },
+  headerContent: {
+    flexDirection: 'column',
+    width: '95%',
+  },
+  orgName: {
+    fontSize: 18,
+    paddingTop: 5,
+    fontWeight: 'bold',
+  },
+  summaryPreview: {
+    fontSize: 14,
+    color: '#666',
+    paddingBottom: 5,
+  },
+  expandedContent: {
+    marginTop: 10,
+  },
+  summary: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 10,
+  },
+  infoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  label: {
+    fontWeight: '600',
+    marginRight: 5,
+  },
+  info: {
+    fontSize: 14,
+    color: '#333',
+  },
+});