botton navi...

src/components/JoinedGroupCard.tsx

@@ -1,7 +1,8 @@
 // src/components/JoinedGroupCard.tsx
 
 import React, { FC } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import colors from './colors';
 
 // Update the type to match the full data structure
 interface JoinedGroup {
@@ -23,6 +24,7 @@ interface JoinedGroup {
 
 interface JoinedGroupCardProps {
   item: JoinedGroup | any;
+  onViewPress: () => void; // Function prop for the View button
 }
 
 // Helper function to format dates
@@ -58,7 +60,7 @@ const getStatusStyle = (status: JoinedGroup['status']) => {
     }
 };
 
-export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item }) => {
+export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress }) => {
   const progress = (item.currentParticipants / item.maxParticipants) * 100;
   const statusStyle = getStatusStyle(item.status);
 
@@ -96,11 +98,14 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item }) => {
         </View>
       </View>
 
-      {/* Dates */}
+      {/* Footer with Dates and View Button */}
       <View style={styles.footer}>
         <Text style={styles.dateText}>
             {formatDate(item.startDate)} - {formatDate(item.endDate)}
         </Text>
+        <TouchableOpacity style={styles.viewButton} onPress={onViewPress}>
+            <Text style={styles.viewButtonText}>View</Text>
+        </TouchableOpacity>
       </View>
     </View>
   );
@@ -151,7 +156,7 @@ const styles = StyleSheet.create({
     paddingVertical: 16,
     borderTopWidth: 1,
     borderBottomWidth: 1,
-    borderColor: '#F3F4F6',
+    borderColor: colors.pastelOrange,
     marginBottom: 16,
   },
   infoItem: {
@@ -193,16 +198,33 @@ const styles = StyleSheet.create({
   },
   progressBarFill: {
     height: '100%',
-    backgroundColor: '#4F46E5',
+    backgroundColor: colors.Settings,
     borderRadius: 4,
   },
   footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
     alignItems: 'center',
     marginTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: '#F3F4F6',
+    paddingTop: 16,
   },
   dateText: {
     fontSize: 14,
     color: '#4B5563',
     fontWeight: '500',
   },
+  // --- NEW STYLES for the View Button ---
+  viewButton: {
+    backgroundColor: colors.pastelOrange,
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 10,
+  },
+  viewButtonText: {
+    color: '#000000ff',
+    fontSize: 14,
+    fontWeight: '600',
+  },
 });