update

2025-08-12 21:03:49 +08:00
parent 5a521d2f3d
commit 7d8942e125
49 changed files with 1002 additions and 122 deletions
@@ -0,0 +1,78 @@
+import { View, Text, Image, Pressable, StyleSheet } from "react-native";
+import React, { useState } from "react";
+import { Palette, Style } from "../../../styles";
+import { icons, img } from "../../../assets";
+import { size } from "../../../styles/Style";
+import { BlurView } from "expo-blur";
+import { FONT_FAMILY } from "../../../styles/Fonts";
+
+const MusicCard = () => {
+  const [selected, setSelected] = useState(false);
+
+  return (
+    <View
+      style={{
+        ...Style.containerRow,
+        gap: 6,
+      }}
+    >
+      <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
+            style={{
+              ...Style.containerRow,
+              gap: 12,
+            }}
+          >
+            <Pressable onPress={() => setSelected(!selected)}>
+              <Image
+                source={selected ? icons.heart : icons.heartOutline}
+                style={size({ size: 24 })}
+                resizeMode="contain"
+              />
+            </Pressable>
+            <Pressable>
+              <Image source={icons.more} />
+            </Pressable>
+          </View>
+        </BlurView>
+      </View>
+    </View>
+  );
+};
+
+export default MusicCard;
+
+const styles = StyleSheet.create({
+  blurContainer: {
+    borderRadius: 12,
+    overflow: "hidden",
+    flex: 1,
+    height: "100%",
+  },
+  title: {
+    fontSize: 16,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.OwnersRegular,
+  },
+  subTitle: {
+    fontSize: 12,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+});