continue generating flow, add backend connection on main tabs

src/screens/Library/components/LikedMusic.js

@@ -1,12 +1,17 @@
-import { View, Text, Image, FlatList } from "react-native";
+import { View, Image, FlatList, Pressable } from "react-native";
 import React from "react";
 import CardContainer from "./CardContainer";
 import { Style } from "../../../styles";
 import { img } from "../../../assets";
 import { navigate } from "../../../navigation/NavigationService";
 import { Routes } from "../../../navigation";
+import { useUser } from "../../../providers/UserDataProvider";
 
 const LikedMusic = () => {
+  const { userLikedProjects = [] } = useUser();
+  const items = Array.isArray(userLikedProjects)
+    ? userLikedProjects.slice(0, 6)
+    : [];
   return (
     <CardContainer
       label="Musiques likées"
@@ -14,17 +19,21 @@ const LikedMusic = () => {
     >
       <FlatList
         scrollEnabled={false}
-        data={Array.from({ length: 6 })}
+        data={items}
         numColumns={3}
         contentContainerStyle={{ gap: 10 }}
         columnWrapperStyle={{ gap: 6 }}
-        renderItem={() => (
-          <View style={{ flex: 1 }}>
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <Pressable
+            style={{ flex: 1 }}
+            onPress={() => navigate(Routes.MusicDetails, { projectId: item.id })}
+          >
             <Image
-              source={img.placeholder3}
+              source={item?.coverUrl ? { uri: item.coverUrl } : img.placeholder3}
               style={{ width: "100%", height: 172, borderRadius: 10 }}
             />
-          </View>
+          </Pressable>
         )}
       />
     </CardContainer>