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-08 21:01:38 +08:00
parent 5a4d36e1bc
commit 7bcc2e9779
28 changed files with 1065 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Studio/ChooseGenre.js
+59 -57
View File
@@ -1,76 +1,78 @@
import { View, Text, StyleSheet, FlatList } from "react-native";
import React from "react";
import { View, Text, FlatList } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { BlurView } from "expo-blur";
import { FONT_FAMILY } from "../../styles/Fonts";
import { Palette } from "../../styles";
import { CHOOSE_GENRE } from "../../data/data";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const ChooseGenre = () => {
const [containerLayout, setContainerLayout] = useState(null);
const [selected, setSelected] = useState(null);
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
return (
<View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
<CreateLyricsHeader
title="Choisis un genre"
subTitle="Tu peux choisir jusqu’à 2 genres différents"
/>
<ItemContainer height={responsiveHeight(55)}>
<FlatList
data={CHOOSE_GENRE}
contentContainerStyle={{
gap: 16,
flexGrow: 1,
zIndex: 2,
}}
renderItem={({ item, index }) => (
<View style={{ borderRadius: 14, overflow: "hidden" }}>
<BlurView
intensity={30}
style={{ paddingVertical: 14, paddingHorizontal: 12 }}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</BlurView>
</View>
)}
/>
</ItemContainer>
<View
style={{ flex: 1 }}
onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
>
<ItemContainer height={containerLayout?.height}>
<FlatList
data={CHOOSE_GENRE}
contentContainerStyle={{
gap: 16,
flexGrow: 1,
zIndex: 2,
paddingTop: 5,
}}
renderItem={({ item, index }) => {
const selectedItem = selected === item.title;
return (
<View style={{ paddingHorizontal: 5 }}>
<CreateLyricsHeader
colors={
selectedItem
? ["#FFFFFF00", "#FFFFFF"]
: [Palette.tran, Palette.tran]
}
tint={selectedItem ? "default" : "dark"}
onPress={() => onPressSelect(item.title)}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</CreateLyricsHeader>
</View>
);
}}
/>
</ItemContainer>
</View>
</View>
);
};
export default ChooseGenre;
const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
position: "absolute",
width: "100%",
},
blurContainer: {
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
maxHeight: responsiveHeight(55),
},
});
src/screens/Studio/ChooseInstruments.js
+34 -13
View File
@@ -9,6 +9,15 @@ import { INSTRUMENTS } from "../../data/data";
const ChooseInstruments = () => {
const [containerLayout, setContainerLayout] = useState(null);
const [selected, setSelected] = useState(null);
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
return (
<View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
@@ -25,21 +34,33 @@ const ChooseInstruments = () => {
data={INSTRUMENTS}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<View style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
paddingHorizontal: 12,
justifyContent: "center",
renderItem={({ item }) => {
const selectedItem = selected === item;
return (
<CreateLyricsHeader
onPress={() => onPressSelect(item)}
tint={selectedItem ? "default" : "dark"}
colors={
selectedItem
? ["#FFFFFF00", "#FFFFFF"]
: [Palette.tran, Palette.tran]
}
containerStyle={{
...styles.itemContainer,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</View>
)}
<View
style={{
height: 40,
justifyContent: "center",
}}
>
<Text style={styles.itemText}>{item}</Text>
</View>
</CreateLyricsHeader>
);
}}
/>
</ItemContainer>
</View>
src/screens/Studio/ChooseRhythm.js
+36 -14
View File
@@ -1,5 +1,5 @@
import { View, Text, FlatList, StyleSheet } from "react-native";
import React from "react";
import React, { useState } from "react";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import { BlurView } from "expo-blur";
@@ -8,6 +8,16 @@ import { FONT_FAMILY } from "../../styles/Fonts";
import { RHYTHM } from "../../data/data";
const ChooseRhythm = () => {
const [selected, setSelected] = useState(null);
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
return (
<View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
<CreateLyricsHeader title="Choisis un rythme" />
@@ -17,21 +27,33 @@ const ChooseRhythm = () => {
data={RHYTHM}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<View style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
paddingHorizontal: 12,
justifyContent: "center",
renderItem={({ item }) => {
const selectedItem = selected === item;
return (
<CreateLyricsHeader
onPress={() => onPressSelect(item)}
tint={selectedItem ? "default" : "dark"}
colors={
selectedItem
? ["#FFFFFF00", "#FFFFFF"]
: [Palette.tran, Palette.tran]
}
containerStyle={{
...styles.itemContainer,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</View>
)}
<View
style={{
height: 40,
justifyContent: "center",
}}
>
<Text style={styles.itemText}>{item}</Text>
</View>
</CreateLyricsHeader>
);
}}
/>
</ItemContainer>
</View>
src/screens/Studio/CustomizeVoice.js
+47 -26
View File
@@ -1,4 +1,4 @@
import { View, Text, FlatList, StyleSheet } from "react-native";
import { View, Text, FlatList, StyleSheet, SectionList } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
@@ -9,6 +9,15 @@ import { VOICE } from "../../data/data";
const CustomizeVoice = () => {
const [containerLayout, setContainerLayout] = useState(null);
const [selected, setSelected] = useState(null);
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
return (
<View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
@@ -22,35 +31,47 @@ const CustomizeVoice = () => {
>
<ItemContainer height={containerLayout?.height}>
<View style={{ flex: 1, gap: 10 }}>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterBold,
left: 16,
marginTop: 5,
}}
>
Base
</Text>
<FlatList
data={VOICE}
<SectionList
sections={VOICE}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<View style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
paddingHorizontal: 12,
paddingVertical: 14,
renderItem={({ item }) => {
const selectedItem = selected === item;
return (
<CreateLyricsHeader
onPress={() => onPressSelect(item)}
tint={selectedItem ? "default" : "dark"}
colors={
selectedItem
? ["#FFFFFF00", "#FFFFFF"]
: [Palette.tran, Palette.tran]
}
containerStyle={{
...styles.itemContainer,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</View>
<View
style={{
paddingVertical: 6,
}}
>
<Text style={styles.itemText}>{item}</Text>
</View>
</CreateLyricsHeader>
);
}}
renderSectionHeader={({ section: { title } }) => (
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterBold,
left: 10,
}}
>
{title}
</Text>
)}
/>
</View>