workout card component created

package.json

@@ -12,21 +12,21 @@
     "@react-navigation/bottom-tabs": "^6.6.0",
     "@react-navigation/native": "^6.1.17",
     "@tanstack/react-query": "^5.49.2",
-    "expo": "~51.0.17",
+    "expo": "^51.0.21",
     "expo-constants": "~16.0.2",
     "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
-    "expo-router": "~3.5.17",
+    "expo-router": "^3.5.18",
     "expo-status-bar": "~1.12.1",
     "graphql": "^15.9.0",
     "graphql-request": "^6.1.0",
     "install": "^0.13.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.74.2",
-    "react-native-gesture-handler": "^2.17.1",
-    "react-native-reanimated": "^3.14.0",
-    "react-native-safe-area-context": "4.10.1",
+    "react-native": "^0.74.3",
+    "react-native-gesture-handler": "^2.16.1",
+    "react-native-reanimated": "^3.10.1",
+    "react-native-safe-area-context": "^4.10.5",
     "react-native-screens": "3.31.1",
     "react-native-web": "~0.19.10"
   },

src/app/(tabs)/_layout.jsx

@@ -36,7 +36,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="Meals"
         options={{
-          title: "Meal Plan",
+          title: "Meals",
           tabBarIcon: ({ color }) => (
             <FontAwesome5 name="utensils" size={24} color={color} />
           ),

src/app/user_workouts/WorkoutsList.jsx

@@ -5,20 +5,80 @@ import {
   Dimensions,
   SafeAreaView,
   ScrollView,
+  ActivityIndicator,
+  TouchableOpacity,
 } from "react-native";
-import React from "react";
+import { Link, useRouter } from "expo-router";
+import { gql } from 'graphql-tag';
+import { useQuery } from "@tanstack/react-query";
+import client from "../../graphqlClient";
 import BackButton from "../../components/BackButton";
+import WorkoutCard from "../../components/WorkoutCard";
+import { useNavigation } from "@react-navigation/native";
+
 
 const { height, width } = Dimensions.get("window");
 
+const WorkoutsListQuery = gql`
+  query MyQuery {
+    workouts {
+      documents {
+        times_completed
+        workout_name
+        exercises
+        _id
+        tonnage
+        days
+      }
+    }
+  }
+`;
+
 const WorkoutsList = () => {
+
+  const navigation = useNavigation();
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['workouts'],
+    queryFn: () => client.request(WorkoutsListQuery),
+  });
+
+  if (isLoading) {
+    return <ActivityIndicator size="large" color="#FFFFFF" />;
+  }
+
+  if (error) {
+    return <Text style={styles.errorText}>Failed to fetch data.</Text>;
+  }
+
+  const workouts = data.workouts.documents;
+
+  const router = useRouter();
+
+  const handleWorkoutPress = (workout) => {
+    navigation.navigate('/user_workouts/[workout]', { id: workout._id, workoutData: workout });
+    // return router.push('/user_workouts/[workout]', { id: workout._id, workoutData: workout });
+  };
+
   return (
     <SafeAreaView style={styles.container}>
       <ScrollView contentContainerStyle={styles.scrollContent}>
         <View style={styles.header}>
           <BackButton />
           <Text style={styles.headerTitle}>Workouts</Text>
         </View>
+
+        {workouts.map((workout) => (
+          <TouchableOpacity 
+            key={workout._id} 
+            onPress={() => handleWorkoutPress(workout)}
+          >
+            <WorkoutCard workout={workout} />
+          </TouchableOpacity>
+        ))}
+
+
+
       </ScrollView>
     </SafeAreaView>
   );
@@ -49,6 +109,12 @@ const styles = StyleSheet.create({
     fontSize: 40,
     fontWeight: "bold",
     color: "#FFFFFF",
-    marginHorizontal: 20, // Add margin to separate the title from the button
+    marginHorizontal: 20,
+  },
+  errorText: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    textAlign: 'center',
+    marginTop: 20,
   },
-});
+});