styels

src/screens/Library/components/BackTracks.js

@@ -1,21 +1,47 @@
-import { View, Text, Image } from "react-native";
-import React from "react";
-import { img } from "../../../assets";
+import React, { useState } from "react";
+import { FlatList, Image, Text, View, useWindowDimensions } from "react-native";
+import { useUserData } from "../../../providers/UserDataProvider";
 import { Style } from "../../../styles";
 import CardContainer from "./CardContainer";
-
 const BackTracks = () => {
+  const { userPlaybacks } = useUserData();
+  const items = Array.isArray(userPlaybacks) ? userPlaybacks.slice(0, 3) : [];
+  const { width: screenWidth } = useWindowDimensions();
+  const [containerWidth, setContainerWidth] = useState(screenWidth);
+  const numColumns = 3;
+  const gap = 8;
+  const itemWidth = Math.max(
+    0,
+    Math.floor((containerWidth - gap * (numColumns - 1)) / numColumns)
+  );
+
   return (
     <CardContainer label="Mes Playbacks">
-      <View style={{ ...Style.containerRow, gap: 6 }}>
-        {Array.from({ length: 3 }).map((_, index) => (
-          <View style={{ flex: 1 }} key={index}>
-            <Image
-              source={img.placeholder3}
-              style={{ width: "100%", height: 172, borderRadius: 10 }}
-            />
-          </View>
-        ))}
+      <View>
+        {items.length > 0 ? (
+          <FlatList
+            onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+            data={items}
+            numColumns={numColumns}
+            key={numColumns}
+            columnWrapperStyle={{ gap }}
+            keyExtractor={(item) => item.id}
+            renderItem={({ item }) => (
+              <View style={{ width: itemWidth }} key={item.id}>
+                <Image
+                  source={{ uri: item.coverUrl || "" }}
+                  style={{
+                    width: "100%",
+                    height: Math.round((itemWidth * 16) / 9),
+                    borderRadius: 10,
+                  }}
+                />
+              </View>
+            )}
+          />
+        ) : (
+          <Text>Aucun playback pour l'instant</Text>
+        )}
       </View>
     </CardContainer>
   );