continue generating flow, add backend connection on main tabs

src/screens/Library/components/MyMusic.js

@@ -4,17 +4,32 @@ import CardContainer from "./CardContainer";
 import MusicCard from "./MusicCard";
 import { navigate } from "../../../navigation/NavigationService";
 import { Routes } from "../../../navigation";
+import { useUser } from "../../../providers/UserDataProvider";
 
 const MyMusic = () => {
+  const { userProjects = [] } = useUser();
+  const projects = Array.isArray(userProjects)
+    ? userProjects.slice(0, 3)
+    : [];
+
   return (
     <CardContainer
       label="Mes musiques"
       onPress={() => navigate(Routes.AllMyMusic)}
     >
       <View style={{ gap: 10 }}>
-        {Array.from({ length: 3 }).map((_, index) => (
-          <MusicCard key={index} />
-        ))}
+        {Array.isArray(projects) &&
+          projects.map((p) => (
+            <MusicCard
+              key={p.id}
+              title={p?.title}
+              subtitle={"MusicLand"}
+              imageUri={p?.coverUrl || null}
+              projectId={p?.id}
+              likedBy={p?.likedBy || []}
+              onPress={() => navigate(Routes.MusicDetails, { projectId: p.id })}
+            />
+          ))}
       </View>
     </CardContainer>
   );