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/Onboarding.js
+1
View File
@@ -17,6 +17,7 @@ export default ({ navigation }) => {
>
<Button text="WRITING" onPress={() => navigate(Routes.Writing)} />
<Button text="STUDIO" onPress={() => navigate(Routes.Studio)} />
<Button text="PRODUCTION" onPress={() => navigate(Routes.ProductionOnboarding)} />
</View>
);
};
src/screens/Production/DownloadSongs.js
+12
View File
@@ -0,0 +1,12 @@
import { View, Text } from "react-native";
import React from "react";
const DownloadSongs = () => {
return (
<View>
<Text>DownloadSongs</Text>
</View>
);
};
export default DownloadSongs;
src/screens/Production/Production.js
+37
View File
@@ -0,0 +1,37 @@
import { View } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { background } from "../../assets";
import { gutters } from "../../styles";
import GradientButton from "../../components/GradientButton";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack } from "../../navigation/NavigationService";
import BorderGradientButton from "../../components/BorderGradientButton";
const Production = () => {
return (
<Page headerType="NONE" backgroundImg={background.productionBG}>
<MusicLandHeader onPressBack={goBack} progress={9} />
<View
style={{
flex: 1,
paddingBottom: gutters * 2,
justifyContent: "flex-end",
gap: 37,
}}
>
<BorderGradientButton title="Je télécharge ma chanson" />
<View style={{ gap: 12 }}>
<GradientButton title="Je veux devenir Playbacker" />
<BorderGradientButton title="Voir exemples" />
</View>
<View style={{ gap: 12 }}>
<GradientButton title="Je veux créer un Clip" />
<BorderGradientButton title="Voir exemples" />
</View>
</View>
</Page>
);
};
export default Production;
src/screens/Production/ProductionOnboarding.js
+29
View File
@@ -0,0 +1,29 @@
import { View, Text } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { background } from "../../assets";
import { gutters } from "../../styles";
import GradientButton from "../../components/GradientButton";
import { navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
const ProductionOnboarding = () => {
return (
<Page headerType="NONE" backgroundImg={background.productionBG}>
<View
style={{
flex: 1,
paddingBottom: gutters * 2,
justifyContent: "flex-end",
}}
>
<GradientButton
title="Commence"
onPress={() => navigate(Routes.Production)}
/>
</View>
</Page>
);
};
export default ProductionOnboarding;
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>
src/screens/Writing/CreatingLyrics.js
+1
View File
@@ -68,6 +68,7 @@ const CreatingLyrics = ({ active }) => {
>
<BlurView
intensity={40}
tint="dark"
style={{ flex: 1, padding: 10, paddingBottom: 20 }}
>
<Pressable
src/screens/Writing/CustomizeSongStructure.js
+15 -10
View File
@@ -5,6 +5,8 @@ import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import { CUSTOM_SONG_STRUCTURE } from "../../data/data";
import DragDropTest from "../../components/DragDropTest";
const CustomizeSongStructure = () => {
const [containerLayout, setContainerLayout] = useState(null);
@@ -15,7 +17,7 @@ const CustomizeSongStructure = () => {
title="Personnalise la structure de ta chanson"
subTitle="Intègre en Drag and drop"
/>
<View style={{ flex: 1, gap: 10 }}>
{/* <View style={{ flex: 1, gap: 10 }}>
<View
style={{ flex: 1 }}
onLayout={(e) => {
@@ -24,18 +26,20 @@ const CustomizeSongStructure = () => {
>
<ItemContainer height={containerLayout?.height}>
<ScrollView contentContainerStyle={{ gap: 10, paddingBottom: 20 }}>
{Array.from({ length: 10 }).map((_, index) => (
<View key={index} style={styles.dropzoneContainer}>
<Text style={styles.dropzone}>Couplet</Text>
</View>
))}
{["Couplet", "Refrain", "Couplet", "Refrain"].map(
(item, index) => (
<View key={index} style={styles.dropzoneContainer}>
<Text style={styles.dropzone}>{item}</Text>
</View>
)
)}
</ScrollView>
</ItemContainer>
</View>
<View style={{ flex: 1 }}>
<ItemContainer height={containerLayout?.height}>
<ScrollView contentContainerStyle={{ gap: 10, paddingBottom: 20 }}>
{Array.from({ length: 10 }).map((_, index) => (
{CUSTOM_SONG_STRUCTURE.map((item, index) => (
<View key={index} style={styles.itemContainer}>
<BlurView
intensity={30}
@@ -46,15 +50,16 @@ const CustomizeSongStructure = () => {
paddingHorizontal: 12,
}}
>
<Text style={styles.dropzone}>
Introduction instrumentale longue.
</Text>
<Text style={styles.dropzone}>{item}</Text>
</BlurView>
</View>
))}
</ScrollView>
</ItemContainer>
</View>
</View> */}
<View style={{ flex: 1 }}>
<DragDropTest />
</View>
</View>
);
src/screens/Writing/EmotionConvey.js
+54 -30
View File
@@ -1,5 +1,5 @@
import { View, Text, FlatList } from "react-native";
import React from "react";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { Palette } from "../../styles";
@@ -8,6 +8,17 @@ import { EMOTION_CONVEY } from "../../data/data";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const EmotionConvey = () => {
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, marginTop: 16 }}>
<CreateLyricsHeader
@@ -15,35 +26,48 @@ const EmotionConvey = () => {
subTitle="Sélectionne tes intentions émotionnelles. (2 max)"
/>
<ItemContainer height={responsiveHeight(50)}>
<FlatList
data={EMOTION_CONVEY}
contentContainerStyle={{
gap: 16,
flexGrow: 1,
zIndex: 2,
paddingTop: 5,
}}
renderItem={({ item, index }) => (
<View style={{ paddingHorizontal: 5 }}>
<CreateLyricsHeader colors={item.color} intensity={30} >
<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
style={{ flex: 1 }}
onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
>
<ItemContainer height={containerLayout?.height}>
<FlatList
data={EMOTION_CONVEY}
contentContainerStyle={{
gap: 16,
flexGrow: 1,
zIndex: 2,
paddingTop: 5,
}}
renderItem={({ item, index }) => {
const selectedItem = selected === item.title;
return (
<View style={{ paddingHorizontal: 5 }}>
<CreateLyricsHeader
colors={item.color}
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>
);
};
src/screens/Writing/Goals.js
+36 -18
View File
@@ -1,14 +1,23 @@
import { View, Text, FlatList, StyleSheet, Pressable } from "react-native";
import React from "react";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { Palette, Style } from "../../styles";
import { BlurView } from "expo-blur";
import { GOALS } from "../../data/data";
import { FONT_FAMILY } from "../../styles/Fonts";
import CustomInput from "./components/CustomInput";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const Goals = () => {
const [selected, setSelected] = useState(null);
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
return (
<View style={{ flex: 1, gap: 16, marginTop: 16 }}>
<View style={{ gap: 10 }}>
@@ -18,21 +27,33 @@ const Goals = () => {
data={GOALS}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<Pressable style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
paddingHorizontal: 12,
...Style.containerCenter,
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>
</Pressable>
)}
<View
style={{
height: 40,
...Style.containerCenter,
}}
>
<Text style={styles.itemText}>{item}</Text>
</View>
</CreateLyricsHeader>
);
}}
/>
</ItemContainer>
</View>
@@ -55,10 +76,7 @@ const styles = StyleSheet.create({
paddingBottom: 50,
},
itemContainer: {
height: 54,
backgroundColor: Palette.glass,
borderRadius: 14,
overflow: "hidden",
shadowColor: "#00000040",
shadowOffset: {
width: 0,
src/screens/Writing/Rhymes.js
+44 -19
View File
@@ -1,34 +1,58 @@
import { View, Text, StyleSheet } from "react-native";
import React from "react";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const Rhymes = () => {
const [selected, setSelected] = useState(null);
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
return (
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader title="Avec ou sans rimes" />
<ItemContainer height={200}>
<View style={{ gap: 10 }}>
{Array.from({ length: 3 }).map((_, index) => (
<View key={index} style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
justifyContent: "center",
paddingHorizontal: 12,
}}
>
<Text style={styles.dropzone}>
Introduction instrumentale longue.
</Text>
</BlurView>
</View>
))}
{["Avec rimes", "Sans rimes", "Mélange des deux"].map(
(item, index) => {
const selectedItem = selected === item;
return (
<CreateLyricsHeader
key={index}
onPress={() => onPressSelect(item)}
tint={selectedItem ? "default" : "dark"}
colors={
selectedItem
? ["#FFFFFF00", "#FFFFFF"]
: [Palette.tran, Palette.tran]
}
containerStyle={{
...styles.itemContainer,
}}
>
<View
style={{
height: 40,
...Style.containerCenter,
paddingHorizontal: 14,
}}
>
<Text style={styles.dropzone}>{item}</Text>
</View>
</CreateLyricsHeader>
);
}
)}
</View>
</ItemContainer>
</View>
@@ -56,5 +80,6 @@ const styles = StyleSheet.create({
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
textAlign: "center",
},
});
src/screens/Writing/SongStructure.js
+39 -17
View File
@@ -1,13 +1,23 @@
import { View, Text, StyleSheet, FlatList, Pressable } from "react-native";
import React from "react";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { BlurView } from "expo-blur";
import { GOALS } from "../../data/data";
import { GOALS, SONG_STRUCTURE } from "../../data/data";
import { Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const SongStructure = () => {
const [selected, setSelected] = useState(null);
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
return (
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader
@@ -16,23 +26,37 @@ const SongStructure = () => {
/>
<ItemContainer>
<FlatList
data={GOALS}
data={SONG_STRUCTURE}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<Pressable style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
...Style.containerCenter,
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>
</Pressable>
)}
<View
style={{
height: 40,
paddingHorizontal: 14,
justifyContent: "center",
}}
>
<Text style={styles.itemText}>{item}</Text>
</View>
</CreateLyricsHeader>
);
}}
/>
</ItemContainer>
</View>
@@ -51,9 +75,7 @@ const styles = StyleSheet.create({
},
itemContainer: {
height: 54,
backgroundColor: Palette.glass,
borderRadius: 14,
overflow: "hidden",
shadowColor: "#00000040",
shadowOffset: {
width: 0,
src/screens/Writing/SongStyle.js
+44 -19
View File
@@ -1,14 +1,24 @@
import { View, Text, FlatList, Pressable, StyleSheet } from "react-native";
import React from "react";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { BlurView } from "expo-blur";
import { GOALS } from "../../data/data";
import { GOALS, SONG_STYLE } from "../../data/data";
import { Palette, Style } from "../../styles";
import CustomInput from "./components/CustomInput";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const SongStyle = () => {
const [selected, setSelected] = useState(null);
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
return (
<View style={{ flex: 1, gap: 16, marginTop: 16 }}>
<View style={{ gap: 10 }}>
@@ -18,24 +28,42 @@ const SongStyle = () => {
/>
<ItemContainer>
<FlatList
data={GOALS}
data={SONG_STYLE}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<Pressable style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
paddingHorizontal: 14,
...Style.containerCenter,
renderItem={({ item }) => {
const selectedItem = selected === item.title;
return (
<CreateLyricsHeader
colors={
selectedItem
? ["#FFFFFF00", "#FFFFFF"]
: [Palette.tran, Palette.tran]
}
tint={selectedItem ? "default" : "dark"}
onPress={() => onPressSelect(item.title)}
containerStyle={{
...styles.itemContainer,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</Pressable>
)}
<View style={{ paddingVertical: 6 }}>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</View>
</CreateLyricsHeader>
);
}}
/>
</ItemContainer>
</View>
@@ -58,10 +86,7 @@ const styles = StyleSheet.create({
paddingBottom: 50,
},
itemContainer: {
height: 54,
backgroundColor: Palette.glass,
borderRadius: 14,
overflow: "hidden",
shadowColor: "#00000040",
shadowOffset: {
width: 0,
src/screens/Writing/components/CreateLyricsHeader.js
+8 -6
View File
@@ -14,12 +14,14 @@ const CreateLyricsHeader = ({
gradientProps,
intensity = 40,
tint = "dark",
containerStyle = {},
onPress,
}) => {
const [onLayout, setOnLayout] = useState(null);
const { isWeb } = useLayoutType();
return (
<View>
<Pressable onPress={onPress}>
<BorderGradient
gradientProps={{
colors: colors,
@@ -33,21 +35,21 @@ const CreateLyricsHeader = ({
top: isWeb ? -1 : 0,
right: isWeb ? -1 : 0,
borderWidth: 1,
borderRadius: 18,
borderRadius: containerStyle?.borderRadius ?? 18,
position: "absolute",
width: "100%",
}}
/>
<Pressable
<View
style={{
backgroundColor: Palette.glass,
borderRadius: 18,
overflow: "hidden",
...containerStyle,
}}
onLayout={(event) => {
setOnLayout(event.nativeEvent.layout);
}}
onPress={() => console.log("PRESSED")}
>
<BlurView
intensity={intensity}
@@ -82,8 +84,8 @@ const CreateLyricsHeader = ({
)}
{children}
</BlurView>
</Pressable>
</View>
</View>
</Pressable>
);
};