leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

playback cards

Browse Source
This commit is contained in:
leon-morival
2025-09-05 15:01:45 +02:00
parent 8464f986c4
commit e5cd374382
2 changed files with 77 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/HitParade/components/PlaybacksCard.js
+56 -46
View File
@@ -1,4 +1,4 @@
import { View, Text, Image, Platform } from "react-native";
import { View, Text, Image, Platform, Pressable } from "react-native";
import React from "react";
import { BlurView } from "expo-blur";
import { img } from "../../../assets";
@@ -6,65 +6,75 @@ import { Palette, Style } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import CoinBadge from "./CoinBadge";
const PlaybacksCard = () => {
const PlaybacksCard = ({
rank = 1,
title = "Sans titre",
artist = "MusicLand",
coverUrl = null,
onPress = () => null,
}) => {
return (
<BlurView
intensity={20}
tint="dark"
style={{
...Style.containerSpaceBetween,
paddingHorizontal: 8,
paddingVertical: 4,
borderRadius: 12,
backgroundColor: Palette.glass,
overflow: "hidden",
}}
experimentalBlurMethod={
Platform.OS !== "ios" ? "dimezisBlurView" : "none"
}
>
<View
<Pressable onPress={onPress}>
<BlurView
intensity={20}
tint="dark"
style={{
...Style.containerRow,
gap: 15,
...Style.containerSpaceBetween,
paddingHorizontal: 8,
paddingVertical: 4,
borderRadius: 12,
backgroundColor: Palette.glass,
overflow: "hidden",
}}
experimentalBlurMethod={
Platform.OS !== "ios" ? "dimezisBlurView" : "none"
}
>
<Text
<View
style={{
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
...Style.containerRow,
gap: 15,
}}
>
1
</Text>
<Image
source={img.placeholder3}
style={{ width: 67, height: 108, borderRadius: 16 }}
/>
<View>
<Text
style={{
fontSize: 16,
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterMedium,
fontFamily: FONT_FAMILY.InterSemiBold,
}}
>
Alors on danse
</Text>
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
Stromae
{rank}
</Text>
<Image
source={coverUrl ? { uri: coverUrl } : img.placeholder3}
style={{ width: 67, height: 108, borderRadius: 16 }}
/>
<View>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterMedium,
}}
numberOfLines={1}
>
{title}
</Text>
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
numberOfLines={1}
>
{artist}
</Text>
</View>
</View>
</View>
<CoinBadge />
</BlurView>
<CoinBadge />
</BlurView>
</Pressable>
);
};