update

src/screens/Library/components/MusicCard.js

@@ -1,5 +1,5 @@
 import { View, Text, Image, Pressable, StyleSheet } from "react-native";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Palette, Style } from "../../../styles";
 import { icons, img } from "../../../assets";
 import { size } from "../../../styles/Style";
@@ -8,52 +8,82 @@ import { FONT_FAMILY } from "../../../styles/Fonts";
 
 const MusicCard = ({ onPress, onPressMore }) => {
   const [selected, setSelected] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [layout, setLayout] = useState(null);
+  const [menuPos, setMenuPos] = useState(0);
+
+  useEffect(() => {
+    if (layout) {
+      const top = layout?.y + 45;
+      setMenuPos(top);
+    }
+  }, [layout]);
+
+  const onPressMenu = () => {
+    onPressMore?.(menuPos);
+  };
 
   return (
-    <Pressable
-      style={{
-        ...Style.containerRow,
-        gap: 6,
-      }}
-      onPress={onPress}
-    >
-      <Image
-        source={img.placeholder2}
-        style={{ ...size({ size: 60 }), borderRadius: 12 }}
-      />
-      <View style={styles.blurContainer}>
-        <BlurView
-          intensity={20}
-          style={{
-            flex: 1,
-            ...Style.containerSpaceBetween,
-            paddingHorizontal: 8,
-          }}
-        >
-          <View>
-            <Text style={styles.title}>Alors on danse</Text>
-            <Text style={styles.subTitle}>Stromae</Text>
-          </View>
-          <View
+    <>
+      <Pressable
+        style={{
+          ...Style.containerRow,
+          gap: 6,
+        }}
+        onPress={onPress}
+        onLayout={(e) => setLayout(e.nativeEvent.layout)}
+      >
+        <Image
+          source={img.placeholder2}
+          style={{ ...size({ size: 60 }), borderRadius: 12 }}
+        />
+        <View style={styles.blurContainer}>
+          <BlurView
+            intensity={20}
             style={{
-              ...Style.containerRow,
-              gap: 12,
+              flex: 1,
+              ...Style.containerSpaceBetween,
+              paddingHorizontal: 8,
             }}
           >
-            <Pressable onPress={() => setSelected(!selected)}>
-              <Image
-                source={selected ? icons.heart : icons.heartOutline}
-                style={size({ size: 24 })}
-                resizeMode="contain"
-              />
-            </Pressable>
-            <Pressable onPress={onPressMore}>
-              <Image source={icons.more} />
-            </Pressable>
-          </View>
-        </BlurView>
-      </View>
-    </Pressable>
+            <View>
+              <Text style={styles.title}>Alors on danse</Text>
+              <Text style={styles.subTitle}>Stromae</Text>
+            </View>
+            <View
+              style={{
+                ...Style.containerRow,
+                gap: 12,
+              }}
+            >
+              <Pressable onPress={() => setSelected(!selected)}>
+                <Image
+                  source={selected ? icons.heart : icons.heartOutline}
+                  style={size({ size: 24 })}
+                  resizeMode="contain"
+                />
+              </Pressable>
+              <Pressable onPress={onPressMenu}>
+                <Image source={icons.more} />
+              </Pressable>
+            </View>
+          </BlurView>
+        </View>
+      </Pressable>
+      {/* {open && (
+        <View
+          style={{
+            width: 100,
+            height: 50,
+            backgroundColor: "red",
+            position: "absolute",
+            right: 0,
+            top: menuPos,
+            zIndex: 2,
+          }}
+        />
+      )} */}
+    </>
   );
 };
 
@@ -76,4 +106,7 @@ const styles = StyleSheet.create({
     color: Palette.white,
     fontFamily: FONT_FAMILY.InterRegular,
   },
+  filterContainer: {
+    backgroundColor: Palette.tran,
+  },
 });