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-12 21:03:49 +08:00
parent 5a521d2f3d
commit 7d8942e125
49 changed files with 1002 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Library/Library.js
+44
View File
@@ -0,0 +1,44 @@
import { View, Image, ScrollView } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { background, icons } from "../../assets";
import SearchBar from "../../components/SearchBar";
import MyMusic from "./components/MyMusic";
import BackTracks from "./components/BackTracks";
import MyClips from "./components/MyClips";
import LikedMusic from "./components/LikedMusic";
import LikedPlayback from "./components/LikedPlayback";
import LikedClips from "./components/LikedClips";
import { responsiveHeight } from "react-native-responsive-dimensions";
import MyPlaylist from "./components/MyPlaylist";
const Library = () => {
return (
<Page backgroundImg={background.libraryBG} headerType="NONE">
<View style={{ gap: 17, paddingBottom: 20 }}>
<Image source={icons.musicLandLogo} style={{ alignSelf: "center" }} />
<SearchBar />
</View>
<View style={{ flex: 1 }}>
<ScrollView
contentContainerStyle={{
flexGrow: 1,
gap: 20,
paddingBottom: responsiveHeight(20),
}}
showsVerticalScrollIndicator={false}
>
<MyMusic />
<BackTracks />
<LikedMusic />
<MyClips />
<MyPlaylist />
<LikedPlayback />
<LikedClips />
</ScrollView>
</View>
</Page>
);
};
export default Library;
src/screens/Library/components/BackTracks.js
+24
View File
@@ -0,0 +1,24 @@
import { View, Text, Image } from "react-native";
import React from "react";
import { img } from "../../../assets";
import { Style } from "../../../styles";
import CardContainer from "./CardContainer";
const BackTracks = () => {
return (
<CardContainer label="Mes Playbacks">
<View style={{ ...Style.containerRow, gap: 6 }}>
{Array.from({ length: 3 }).map((_, index) => (
<View style={{ flex: 1 }} key={index}>
<Image
source={img.placeholder3}
style={{ width: "100%", height: 172, borderRadius: 10 }}
/>
</View>
))}
</View>
</CardContainer>
);
};
export default BackTracks;
src/screens/Library/components/CardContainer.js
+33
View File
@@ -0,0 +1,33 @@
import { View, Text, StyleSheet, Pressable } from "react-native";
import React from "react";
import { Palette, Style } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
const CardContainer = ({ children, label = "" }) => {
return (
<View style={{ gap: 12 }}>
<View style={{ ...Style.containerSpaceBetween }}>
<Text style={styles.label}>{label}</Text>
<Pressable>
<Text style={styles.seeAll}>Voir tout</Text>
</Pressable>
</View>
{children}
</View>
);
};
export default CardContainer;
const styles = StyleSheet.create({
label: {
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
},
seeAll: {
fontSize: 12,
color: Palette.gray,
fontFamily: FONT_FAMILY.InterRegular,
},
});
src/screens/Library/components/LikedClips.js
+24
View File
@@ -0,0 +1,24 @@
import { View, Text, Image } from "react-native";
import React from "react";
import CardContainer from "./CardContainer";
import { Style } from "../../../styles";
import { img } from "../../../assets";
const LikedClips = () => {
return (
<CardContainer label="Clips likés">
<View style={{ ...Style.containerRow, gap: 6 }}>
{Array.from({ length: 3 }).map((_, index) => (
<View style={{ flex: 1 }} key={index}>
<Image
source={img.placeholder3}
style={{ width: "100%", height: 172, borderRadius: 10 }}
/>
</View>
))}
</View>
</CardContainer>
);
};
export default LikedClips;
src/screens/Library/components/LikedMusic.js
+29
View File
@@ -0,0 +1,29 @@
import { View, Text, Image, FlatList } from "react-native";
import React from "react";
import CardContainer from "./CardContainer";
import { Style } from "../../../styles";
import { img } from "../../../assets";
const LikedMusic = () => {
return (
<CardContainer label="Musiques likées">
<FlatList
scrollEnabled={false}
data={Array.from({ length: 6 })}
numColumns={3}
contentContainerStyle={{ gap: 10 }}
columnWrapperStyle={{ gap: 6 }}
renderItem={() => (
<View style={{ flex: 1 }}>
<Image
source={img.placeholder3}
style={{ width: "100%", height: 172, borderRadius: 10 }}
/>
</View>
)}
/>
</CardContainer>
);
};
export default LikedMusic;
src/screens/Library/components/LikedPlayback.js
+24
View File
@@ -0,0 +1,24 @@
import { View, Text, Image } from "react-native";
import React from "react";
import CardContainer from "./CardContainer";
import { Style } from "../../../styles";
import { img } from "../../../assets";
const LikedPlayback = () => {
return (
<CardContainer label="Playbacks likés">
<View style={{ ...Style.containerRow, gap: 6 }}>
{Array.from({ length: 3 }).map((_, index) => (
<View style={{ flex: 1 }} key={index}>
<Image
source={img.placeholder3}
style={{ width: "100%", height: 172, borderRadius: 10 }}
/>
</View>
))}
</View>
</CardContainer>
);
};
export default LikedPlayback;
src/screens/Library/components/MusicCard.js
+78
View File
@@ -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,
},
});
src/screens/Library/components/MyClips.js
+24
View File
@@ -0,0 +1,24 @@
import { View, Text, Image } from "react-native";
import React from "react";
import CardContainer from "./CardContainer";
import { Style } from "../../../styles";
import { img } from "../../../assets";
const MyClips = () => {
return (
<CardContainer label="Mes Clips">
<View style={{ ...Style.containerRow, gap: 6 }}>
{Array.from({ length: 3 }).map((_, index) => (
<View style={{ flex: 1 }} key={index}>
<Image
source={img.placeholder3}
style={{ width: "100%", height: 172, borderRadius: 10 }}
/>
</View>
))}
</View>
</CardContainer>
);
};
export default MyClips;
src/screens/Library/components/MyMusic.js
+18
View File
@@ -0,0 +1,18 @@
import { View } from "react-native";
import React from "react";
import CardContainer from "./CardContainer";
import MusicCard from "./MusicCard";
const MyMusic = () => {
return (
<CardContainer label="Mes musiques">
<View style={{ gap: 10 }}>
{Array.from({ length: 3 }).map((_, index) => (
<MusicCard key={index} />
))}
</View>
</CardContainer>
);
};
export default MyMusic;
src/screens/Library/components/MyPlaylist.js
+51
View File
@@ -0,0 +1,51 @@
import { View, Text, Pressable, Image } from "react-native";
import React from "react";
import CardContainer from "./CardContainer";
import { BlurView } from "expo-blur";
import { icons } from "../../../assets";
import Style, { size } from "../../../styles/Style";
import { Palette } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
const MyPlaylist = () => {
return (
<CardContainer label="Mes Playlists">
<View style={{ gap: 8 }}>
{["Musiques de lover", "Musiques triste"].map((item, index) => (
<View style={{ borderRadius: 12, overflow: "hidden" }} key={index}>
<BlurView
intensity={20}
style={{
...Style.containerSpaceBetween,
height: 59,
paddingHorizontal: 10,
}}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
{item}
</Text>
<Pressable>
<Image
source={icons.chevronDown}
style={{
...size({ size: 15 }),
transform: [{ rotate: "-90deg" }],
}}
resizeMode="contain"
/>
</Pressable>
</BlurView>
</View>
))}
</View>
</CardContainer>
);
};
export default MyPlaylist;