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/assets/UI/homeBG.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 597 KiB

src/assets/index.js
+4 -2
View File
@@ -84,6 +84,7 @@ import pause from "./icons/pause.png";
import share from "./icons/share.png";
import hitParadeLogo from "./icons/hitParadeLogo.png";
import calendar from "./icons/calendar.png";
import coin from "./icons/coin.png";
export const icons = {
bell,
@@ -145,6 +146,7 @@ export const icons = {
share,
hitParadeLogo,
calendar,
coin,
};
import triangle from "./art/triangle.png";
@@ -152,7 +154,6 @@ import circle from "./art/circle.png";
import square from "./art/square.png";
import gradientTriangle from "./art/gradientTriangle.png";
import coin from "./art/coin.png";
import threeCoins from "./art/threeCoins.png";
import boost from "./art/boost.png";
import boostBig from "./art/boostBig.png";
@@ -162,7 +163,6 @@ export const art = {
circle,
square,
gradientTriangle,
coin,
threeCoins,
boost,
boostBig,
@@ -199,6 +199,7 @@ import libraryBG from "./UI/libraryBG.png";
import libraryBG2 from "./UI/libraryBG2.png";
import profileBG from "./UI/profileBG.png";
import hitParadeBG from "./UI/hitParadeBG.png";
import homeBG from "./UI/homeBG.png";
export const background = {
writingBG,
@@ -212,6 +213,7 @@ export const background = {
libraryBG2,
profileBG,
hitParadeBG,
homeBG,
};
import nathalie from "./UI/nathalie.png";
src/navigation/BottomTab.js
+2 -1
View File
@@ -20,6 +20,7 @@ import SettingsStack from "./SettingsStack";
import Library from "../screens/Library/Library.js";
import Profile from "../screens/Profile/Profile.js";
import HitParade from "../screens/HitParade/HitParade.js";
import Playbacks from "../screens/Playbacks.js";
const bottomTabStyles = StyleSheet.create({
icon: {
@@ -73,7 +74,7 @@ export const BottomTabScreen = () => {
/>
<BottomTab.Screen
name={Routes.Playbacks}
component={SettingsStack}
component={Playbacks}
options={{
tabBarLabel: "Playbacks",
headerShown: false,
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;
src/screens/Home.js
+2 -63
View File
@@ -15,6 +15,7 @@ import DocumentDropZone from "../components/DocumentDropZone";
import FilesPreview from "../components/FilesPreview";
import { documentsRef } from "../config/firebase";
import { background } from "../assets";
const accountTypeList = {
INDIVIDUAL: "Particulier",
@@ -157,68 +158,6 @@ export default ({ containerStyle = {} }) => {
};
return (
<Page
title="Accueil"
scrollEnabled
containerStyle={containerStyle}
bottomStickyContent={() => (
<Button
isAbsoluteBottom
text="Enregistrer"
contentContainerStyle={{ bottom: responsiveHeight(15) }}
onPress={onSubmit}
/>
)}
>
<>
<SectionTextHeader title="Type de compte" />
<OptionSelector
optionTypeList={accountTypeList}
selected={type}
setSelected={(value) => updateBillingDetails("type", value)}
containerStyle={{ marginBottom: gutters }}
colorMap={accountTypeColorMap}
/>
{fieldList.map(
({ key, label, value, type = "default", inputProps = {} }) => (
<React.Fragment key={key}>
<SectionTextHeader title={label} />
<Input
key={key}
placeholder={label}
value={value}
setValue={(value) => updateBillingDetails(key, value)}
containerStyle={{ marginBottom: gutters }}
type={type}
{...inputProps}
/>
</React.Fragment>
)
)}
<DocumentDropZone
documentExists={!!documentID}
documentID={documentID}
collectionRef={documentsRef}
setFiles={(files) => updateBillingDetails("files", files)}
containerStyle={{
alignSelf: "center",
height: 150,
width: "100%",
marginBottom: gutters,
}}
/>
<FilesPreview
files={files}
setFiles={(files) => updateBillingDetails("files", files)}
documentID={documentID}
containerStyle={{}}
/>
</>
</Page>
<Page backgroundImg={background.homeBG} headerType="NONE"></Page>
);
};
src/screens/Playbacks.js
+124
View File
@@ -0,0 +1,124 @@
import { View, Text, Image, Pressable } from "react-native";
import React from "react";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { icons, img } from "../assets";
import { size } from "../styles/Style";
import { BlurView } from "expo-blur";
import { Palette } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import Carousel from "react-native-reanimated-carousel";
const Playbacks = () => {
return (
<View style={{ flex: 1 }}>
<Carousel
data={Array.from({ length: 5 })}
vertical
height={responsiveHeight(100)}
renderItem={() => (
<View
style={{
height: responsiveHeight(100),
position: "relative",
}}
>
<Image
source={img.placeholder3}
style={{ width: "100%", height: "100%" }}
/>
<View
style={{
position: "absolute",
width: "100%",
bottom: 130,
gap: 18,
}}
>
<View
style={{
alignSelf: "flex-end",
alignItems: "center",
gap: 20,
paddingHorizontal: 13,
}}
>
<View style={{ gap: 6, alignItems: "center" }}>
<Pressable>
<Image
source={img.profile}
style={{
...size({ size: 45 }),
borderRadius: 100,
}}
/>
</Pressable>
<Pressable>
<BlurView
tint="dark"
intensity={20}
style={{
paddingVertical: 6,
paddingHorizontal: 12,
borderRadius: 12,
borderWidth: 1,
borderColor: Palette.white,
overflow: "hidden",
}}
>
<Text
style={{
fontSize: 13,
color: Palette.white,
fontFamily: FONT_FAMILY.InterMedium,
}}
>
Suivre
</Text>
</BlurView>
</Pressable>
</View>
<Pressable>
<Image
source={icons.heartOutline}
style={size({ size: 26 })}
resizeMode="contain"
/>
</Pressable>
<Pressable>
<Image source={icons.share} style={size({ size: 26 })} />
</Pressable>
</View>
<View style={{ paddingHorizontal: 28 }}>
<BlurView
tint="dark"
intensity={20}
style={{
paddingHorizontal: 14,
paddingVertical: 8,
borderRadius: 20,
backgroundColor: Palette.glass,
overflow: "hidden",
}}
>
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
Description chanson. Viverra enim risus enim enim placerat.
Integer pulvinar tristique suscipit risus. Id hendrerit in
odio phasellus interdum
</Text>
</BlurView>
</View>
</View>
</View>
)}
/>
</View>
);
};
export default Playbacks;