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

update

Browse Source
This commit is contained in:
Philip Cesar Garay
2025-08-20 21:06:21 +08:00
parent abffadc9b9
commit 046a92d866
9 changed files with 343 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/HitParade/HitParade.js
+34 -1
View File
@@ -1,4 +1,4 @@
import { View, Text, Image, Pressable } from "react-native";
import { View, Text, Image, Pressable, FlatList } from "react-native";
import React, { useState } from "react";
import Page from "../../layouts/Page";
import { background, icons } from "../../assets";
@@ -6,6 +6,9 @@ import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import { Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import BorderGradientButton from "../../components/BorderGradientButton";
import SongCard from "./components/SongCard";
import { responsiveHeight } from "react-native-responsive-dimensions";
import PlaybacksCard from "./components/PlaybacksCard";
const HitParade = () => {
const [selected, setSelected] = useState("Chansons");
@@ -71,6 +74,36 @@ const HitParade = () => {
/>
))}
</View>
{selected === "Chansons" && (
<FlatList
contentContainerStyle={{
gap: 10,
paddingBottom: responsiveHeight(20),
}}
data={Array.from({ length: 5 })}
renderItem={() => <SongCard />}
/>
)}
{selected === "Playbacks" && (
<FlatList
contentContainerStyle={{
gap: 10,
paddingBottom: responsiveHeight(20),
}}
data={Array.from({ length: 5 })}
renderItem={() => <PlaybacksCard />}
/>
)}
{selected === "Clips" && (
<FlatList
contentContainerStyle={{
gap: 10,
paddingBottom: responsiveHeight(20),
}}
data={Array.from({ length: 5 })}
renderItem={() => <PlaybacksCard />}
/>
)}
</View>
</View>
</Page>
src/screens/HitParade/components/CoinBadge.js
+37
View File
@@ -0,0 +1,37 @@
import { View, Text, Image } from "react-native";
import React from "react";
import { Palette, Style } from "../../../styles";
import { icons } from "../../../assets";
import { size } from "../../../styles/Style";
import { FONT_FAMILY } from "../../../styles/Fonts";
const CoinBadge = () => {
return (
<View style={{ ...Style.containerRow }}>
<View
style={{
paddingLeft: 5,
paddingRight: 10,
paddingVertical: 3,
borderTopLeftRadius: 8,
borderBottomLeftRadius: 8,
backgroundColor: Palette.glass,
right: -10,
}}
>
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
100
</Text>
</View>
<Image source={icons.coin} style={size({ size: 26 })} />
</View>
);
};
export default CoinBadge;
src/screens/HitParade/components/PlaybacksCard.js
+68
View File
@@ -0,0 +1,68 @@
import { View, Text, Image } from "react-native";
import React from "react";
import { BlurView } from "expo-blur";
import { img } from "../../../assets";
import { Palette, Style } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import CoinBadge from "./CoinBadge";
const PlaybacksCard = () => {
return (
<BlurView
intensity={20}
tint="dark"
style={{
...Style.containerSpaceBetween,
paddingHorizontal: 8,
paddingVertical: 4,
borderRadius: 12,
backgroundColor: Palette.glass,
overflow: "hidden",
}}
>
<View
style={{
...Style.containerRow,
gap: 15,
}}
>
<Text
style={{
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
}}
>
1
</Text>
<Image
source={img.placeholder3}
style={{ width: 67, height: 108, borderRadius: 16 }}
/>
<View>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterMedium,
}}
>
Alors on danse
</Text>
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
Stromae
</Text>
</View>
</View>
<CoinBadge />
</BlurView>
);
};
export default PlaybacksCard;
src/screens/HitParade/components/SongCard.js
+72
View File
@@ -0,0 +1,72 @@
import { View, Text, Image } from "react-native";
import React from "react";
import { img } from "../../../assets";
import { BlurView } from "expo-blur";
import Style, { size } from "../../../styles/Style";
import { Palette } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import CoinBadge from "./CoinBadge";
const SongCard = () => {
return (
<View
style={{
...Style.containerRow,
gap: 6,
}}
>
<Image
source={img.placeholder2}
style={{ ...size({ size: 60 }), borderRadius: 12 }}
/>
<BlurView
intensity={20}
style={{
flex: 1,
borderRadius: 12,
overflow: "hidden",
paddingHorizontal: 8,
paddingVertical: 11,
backgroundColor: Palette.glass,
...Style.containerRow,
}}
tint="dark"
>
<View style={{ flex: 1, ...Style.containerRow, gap: 15 }}>
<Text
style={{
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
}}
>
1
</Text>
<View>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterMedium,
}}
>
Alors on danse
</Text>
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
Stromae
</Text>
</View>
</View>
<CoinBadge />
</BlurView>
</View>
);
};
export default SongCard;