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-06 21:06:01 +08:00
parent d08ec7b778
commit 40e877774b
33 changed files with 1148 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Writing/CreateLyricsWithAi.js
+24 -15
View File
@@ -1,8 +1,7 @@
import { View, Text, ScrollView, Dimensions } from "react-native";
import { View, Dimensions } from "react-native";
import React, { useRef, useState } from "react";
import Page from "../../layouts/Page";
import MusicLandHeader from "../../components/MusicLandHeader";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import GradientButton from "../../components/GradientButton";
import { gutters } from "../../styles";
import { SwiperFlatList } from "react-native-swiper-flatlist";
@@ -16,6 +15,7 @@ import SongStructure from "./SongStructure";
import CustomizeSongStructure from "./CustomizeSongStructure";
import Rhymes from "./Rhymes";
import CreatingLyrics from "./CreatingLyrics";
import { responsiveHeight } from "react-native-responsive-dimensions";
const { width } = Dimensions.get("window");
@@ -23,8 +23,7 @@ const CreateLyricsWithAi = () => {
const scrollRef = useRef(null);
const [selectedIndex, setSelectedIndex] = useState(0);
const [progress, setProgress] = useState(16);
console.log("progress: ", progress);
const [parentLayout, setparentLayout] = useState(null);
const onPressNext = () => {
setSelectedIndex(selectedIndex + 1);
@@ -55,8 +54,18 @@ const CreateLyricsWithAi = () => {
progress={progress}
showSkip={selectedIndex === 4}
/>
<View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
<View style={{ flex: 1 }}>
<View
style={{
flex: 1,
marginTop: 16,
paddingBottom: gutters,
gap: responsiveHeight(5),
}}
>
<View
style={{ flex: 1 }}
onLayout={(e) => setparentLayout(e.nativeEvent.layout)}
>
<SwiperFlatList
style={{ width, left: -gutters }}
ref={scrollRef}
@@ -65,7 +74,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
@@ -74,7 +83,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
@@ -83,7 +92,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
@@ -92,7 +101,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
@@ -101,7 +110,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
@@ -110,7 +119,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
@@ -119,7 +128,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
@@ -128,7 +137,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
@@ -137,7 +146,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
src/screens/Writing/CreatingLyrics.js
+1
View File
@@ -19,6 +19,7 @@ const CreatingLyrics = ({ active }) => {
setProgress((prevProgress) => {
if (prevProgress >= 100) {
clearInterval(interval);
navigate(Routes.Lyrics)
return 100;
}
return prevProgress + 1;
src/screens/Writing/CustomizeSongStructure.js
+42 -71
View File
@@ -1,13 +1,14 @@
import { View, Text, StyleSheet, ScrollView } 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 BorderGradient from "../../components/BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import { Palette, Style } from "../../styles";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const CustomizeSongStructure = () => {
const [containerLayout, setContainerLayout] = useState(null);
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader
@@ -15,56 +16,45 @@ const CustomizeSongStructure = () => {
subTitle="Intègre en Drag and drop"
/>
<View style={{ flex: 1, gap: 10 }}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
<View
style={{ flex: 1 }}
onLayout={(e) => {
setContainerLayout(e.nativeEvent.layout);
}}
style={styles.borderGradientStyle}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
<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>
))}
</ScrollView>
</BlurView>
</View>
</BorderGradient>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={styles.borderGradientStyle}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
<ScrollView
contentContainerStyle={{ gap: 10, paddingBottom: 20 }}
>
{Array.from({ length: 10 }).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>
))}
</ScrollView>
</BlurView>
</View>
</BorderGradient>
<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>
))}
</ScrollView>
</ItemContainer>
</View>
<View style={{ flex: 1 }}>
<ItemContainer height={containerLayout?.height}>
<ScrollView contentContainerStyle={{ gap: 10, paddingBottom: 20 }}>
{Array.from({ length: 10 }).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>
))}
</ScrollView>
</ItemContainer>
</View>
</View>
</View>
);
@@ -73,25 +63,6 @@ const CustomizeSongStructure = () => {
export default CustomizeSongStructure;
const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
height: responsiveHeight(30),
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
},
blurContainer: {
flex: 1,
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
},
dropzoneContainer: {
paddingVertical: 14,
paddingHorizontal: 12,
src/screens/Writing/EmotionConvey.js
+49 -90
View File
@@ -1,4 +1,4 @@
import { View, Text, StyleSheet, FlatList, Pressable } from "react-native";
import { View, Text, FlatList } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
@@ -7,9 +7,9 @@ import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { EMOTION_CONVEY } from "../../data/data";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const EmotionConvey = () => {
const [containerLayout, setContainerLayout] = useState(null);
const [itemLayout, setItemLayout] = useState([]);
return (
@@ -19,100 +19,59 @@ const EmotionConvey = () => {
subTitle="Sélectionne tes intentions émotionnelles. (2 max)"
/>
<View style={styles.blurContainer}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
<ItemContainer height={responsiveHeight(50)}>
<FlatList
data={EMOTION_CONVEY}
contentContainerStyle={{
gap: 16,
flexGrow: 1,
zIndex: 2,
}}
style={{
...styles.borderGradientStyle,
height: containerLayout?.height,
}}
/>
<BlurView
intensity={40}
style={{ padding: 6, zIndex: 2, }}
onLayout={(e) => {
e.persist();
setContainerLayout(e.nativeEvent.layout);
}}
>
<FlatList
data={EMOTION_CONVEY}
contentContainerStyle={{
gap: 16,
flexGrow: 1,
zIndex: 2,
}}
renderItem={({ item, index }) => (
<View>
<BorderGradient
gradientProps={{
colors: item.color,
}}
style={{
borderWidth: 1,
height: itemLayout[index]?.height,
borderRadius: 14,
position: "absolute",
width: "100%",
}}
/>
<View
style={{ borderRadius: 14, overflow: "hidden" }}
onLayout={(e) => {
e.persist();
setItemLayout((prev) => [...prev, e.nativeEvent.layout]);
}}
renderItem={({ item, index }) => (
<View>
<BorderGradient
gradientProps={{
colors: item.color,
}}
style={{
borderWidth: 1,
height: itemLayout[index]?.height,
borderRadius: 14,
position: "absolute",
width: "100%",
}}
/>
<View
style={{ borderRadius: 14, overflow: "hidden" }}
onLayout={(e) => {
e.persist();
setItemLayout((prev) => [...prev, e.nativeEvent.layout]);
}}
>
<BlurView
intensity={30}
style={{ paddingVertical: 14, paddingHorizontal: 12 }}
>
<BlurView
intensity={30}
style={{ paddingVertical: 14, paddingHorizontal: 12 }}
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<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>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</BlurView>
</View>
)}
/>
</BlurView>
</View>
</View>
)}
/>
</ItemContainer>
</View>
);
};
export default EmotionConvey;
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/Writing/FinishedWriting.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { View, Text, Image, StyleSheet } from "react-native";
import { View, Image, StyleSheet } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { ai } from "../../assets";
src/screens/Writing/Goals.js
+25 -52
View File
@@ -1,49 +1,40 @@
import { View, Text, FlatList, StyleSheet, Pressable } from "react-native";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
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 { responsiveHeight } from "react-native-responsive-dimensions";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const Goals = () => {
return (
<View style={{ flex: 1, gap: 16 }}>
<View style={{ gap: 10 }}>
<CreateLyricsHeader title="Quels sont tes objectifs ?" />
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={styles.borderGradientStyle}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
<FlatList
data={GOALS}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<Pressable style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
...Style.containerCenter,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</Pressable>
)}
/>
</BlurView>
</View>
</BorderGradient>
<ItemContainer>
<FlatList
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,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</Pressable>
)}
/>
</ItemContainer>
</View>
<CustomInput
label="Tu as un autre objectif?"
@@ -56,31 +47,12 @@ const Goals = () => {
export default Goals;
const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
height: responsiveHeight(40),
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
},
blurContainer: {
flex: 1,
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
},
contentContainer: {
flexGrow: 1,
padding: 8,
gap: 10,
backgroundColor: "#FFFFFF00",
paddingBottom: 100,
paddingBottom: 50,
},
itemContainer: {
height: 54,
@@ -101,5 +73,6 @@ const styles = StyleSheet.create({
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
textAlign: "center",
},
});
src/screens/Writing/Lyrics.js
+46 -65
View File
@@ -1,79 +1,68 @@
import { View, Text, Image, StyleSheet, ScrollView } from "react-native";
import React from "react";
import { View, Text, ScrollView } from "react-native";
import React, { useState } from "react";
import Page from "../../layouts/Page";
import { ai } from "../../assets";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack, navigate } from "../../navigation/NavigationService";
import { gutters, Palette } from "../../styles";
import BorderGradientButton from "../../components/BorderGradientButton";
import GradientButton from "../../components/GradientButton";
import { Routes } from "../../navigation";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import CustomInput from "./components/CustomInput";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const Lyrics = () => {
const [containerLayout, setContainerLayout] = useState(null);
return (
<Page headerType="NONE">
<MusicLandHeader onPressBack={goBack} progress={95} />
<View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
start: { x: 0, y: 0 },
end: { x: 0, y: 1 },
}}
style={styles.borderGradientStyle}
>
<View style={{ borderRadius: 20, overflow: "hidden", flex: 1 }}>
<BlurView intensity={40} style={{ flex: 1 }}>
<ScrollView
contentContainerStyle={{
paddingHorizontal: 14,
paddingVertical: 10,
gap: 10,
flexGrow: 1,
<View
style={{
flex: 1,
marginTop: 16,
gap: 48,
}}
onLayout={(e) => setContainerLayout(e.nativeEvent.layout)}
>
<ItemContainer height={containerLayout?.height}>
<ScrollView
contentContainerStyle={{
paddingHorizontal: 14,
paddingVertical: 10,
gap: 10,
flexGrow: 1,
}}
>
<CustomInput label="Titre" placeholder="Titre" height={45} />
<View
style={{
height: 45,
justifyContent: "center",
backgroundColor: "#00000080",
borderRadius: 14,
paddingHorizontal: 12,
marginTop: 20,
}}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<CustomInput label="Titre" placeholder="Titre" height={45} />
<View
style={{
height: 45,
justifyContent: "center",
backgroundColor: "#00000080",
borderRadius: 14,
paddingHorizontal: 12,
marginTop: 20,
}}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
Introduction instrumentale longue
</Text>
</View>
<CustomInput
label="Couplet"
placeholder="Couplet"
height={225}
/>
<CustomInput
label="Refrain"
placeholder="Refrain"
height={170}
/>
</ScrollView>
</BlurView>
</View>
</BorderGradient>
Introduction instrumentale longue
</Text>
</View>
<CustomInput label="Couplet" placeholder="Couplet" height={225} />
<CustomInput label="Refrain" placeholder="Refrain" height={170} />
</ScrollView>
</ItemContainer>
</View>
<View
style={{
paddingTop: gutters,
paddingBottom: gutters * 2,
paddingHorizontal: gutters,
gap: 12,
@@ -90,11 +79,3 @@ const Lyrics = () => {
};
export default Lyrics;
const styles = StyleSheet.create({
borderGradientStyle: {
height: "100%",
borderWidth: 1,
borderRadius: 20,
},
});
src/screens/Writing/Rhymes.js
+6 -45
View File
@@ -1,36 +1,17 @@
import { View, Text, StyleSheet } from "react-native";
import React, { useState } from "react";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { responsiveHeight } from "react-native-responsive-dimensions";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const Rhymes = () => {
const [containerLayout, setContainerLayout] = useState(null);
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader title="Avec ou sans rimes" />
<View style={styles.blurContainer}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={{
...styles.borderGradientStyle,
height: containerLayout?.height,
}}
/>
<BlurView
intensity={40}
style={{ padding: 6, zIndex: 2, gap: 10 }}
onLayout={(e) => {
e.persist();
setContainerLayout(e.nativeEvent.layout);
}}
>
<ItemContainer height={200}>
<View style={{ gap: 10 }}>
{Array.from({ length: 3 }).map((_, index) => (
<View key={index} style={styles.itemContainer}>
<BlurView
@@ -48,8 +29,8 @@ const Rhymes = () => {
</BlurView>
</View>
))}
</BlurView>
</View>
</View>
</ItemContainer>
</View>
);
};
@@ -57,20 +38,6 @@ const Rhymes = () => {
export default Rhymes;
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%",
},
itemContainer: {
height: 54,
backgroundColor: Palette.glass,
@@ -90,10 +57,4 @@ const styles = StyleSheet.create({
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
blurContainer: {
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
maxHeight: responsiveHeight(55),
},
});
src/screens/Writing/SongStructure.js
+24 -53
View File
@@ -1,50 +1,40 @@
import { View, Text, StyleSheet, FlatList, Pressable } from "react-native";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import { GOALS } from "../../data/data";
import { Palette, Style } from "../../styles";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const SongStructure = () => {
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader
title="Comment veux-tu structurer ta chanson ?"
subTitle="Sélectionne une structure.o"
subTitle="Sélectionne une structure."
/>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={styles.borderGradientStyle}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
<FlatList
data={GOALS}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<Pressable style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
...Style.containerCenter,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</Pressable>
)}
/>
</BlurView>
</View>
</BorderGradient>
<ItemContainer>
<FlatList
data={GOALS}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<Pressable style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
...Style.containerCenter,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</Pressable>
)}
/>
</ItemContainer>
</View>
);
};
@@ -52,31 +42,12 @@ const SongStructure = () => {
export default SongStructure;
const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
height: responsiveHeight(40),
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
},
blurContainer: {
flex: 1,
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
},
contentContainer: {
flexGrow: 1,
padding: 8,
gap: 10,
backgroundColor: "#FFFFFF00",
paddingBottom: 100,
paddingBottom: 50,
},
itemContainer: {
height: 54,
src/screens/Writing/SongStyle.js
+25 -52
View File
@@ -1,13 +1,12 @@
import { View, Text, FlatList, Pressable, StyleSheet } from "react-native";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import { GOALS } from "../../data/data";
import { Palette, Style } from "../../styles";
import CustomInput from "./components/CustomInput";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const SongStyle = () => {
return (
@@ -17,36 +16,28 @@ const SongStyle = () => {
title={`Quel est le style de ta chanson ?`}
subTitle="Choisis l'ambiance émotions que tu veux faire passer."
/>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={styles.borderGradientStyle}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
<FlatList
data={GOALS}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<Pressable style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
...Style.containerCenter,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</Pressable>
)}
/>
</BlurView>
</View>
</BorderGradient>
<ItemContainer>
<FlatList
data={GOALS}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<Pressable style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
paddingHorizontal: 14,
...Style.containerCenter,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</Pressable>
)}
/>
</ItemContainer>
</View>
<CustomInput
label="Tu as un autre style de chanson ?"
@@ -59,31 +50,12 @@ const SongStyle = () => {
export default SongStyle;
const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
height: responsiveHeight(40),
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
},
blurContainer: {
flex: 1,
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
},
contentContainer: {
flexGrow: 1,
padding: 8,
gap: 10,
backgroundColor: "#FFFFFF00",
paddingBottom: 100,
paddingBottom: 50,
},
itemContainer: {
height: 54,
@@ -104,5 +76,6 @@ const styles = StyleSheet.create({
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
textAlign: "center",
},
});
src/screens/Writing/SpecificityContext.js
+1 -2
View File
@@ -1,8 +1,7 @@
import { View, Text } from "react-native";
import { View } from "react-native";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import CustomInput from "./components/CustomInput";
import { gutters } from "../../styles";
const SpecificityContext = () => {
return (
src/screens/Writing/WritingLyrics.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { View, Text, Image, StyleSheet } from "react-native";
import { View, Image, StyleSheet } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { ai } from "../../assets";
src/screens/Writing/components/CreateLyricsHeader.js
+14 -6
View File
@@ -1,28 +1,35 @@
import { View, Text } from "react-native";
import { View, Text, Pressable } from "react-native";
import React, { useState } from "react";
import { BlurView } from "expo-blur";
import BorderGradient from "../../../components/BorderGradient/BorderGradient";
import { Palette } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import useLayoutType from "../../../hooks/useLayoutType";
const CreateLyricsHeader = ({ title = "", subTitle = "", height = 45 }) => {
const [onLayout, setOnLayout] = useState(null);
const { isWeb } = useLayoutType();
return (
<>
<View style={{ paddingTop: isWeb ? 10 : 0 }}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
locations: [0.2, 1],
start: { x: 0, y: 0 },
end: { x: 1, y: 0 },
}}
style={{
height: onLayout?.height,
height: isWeb ? onLayout?.height + 2 : onLayout?.height,
top: isWeb ? -1 : 0,
right: isWeb ? -1 : 0,
borderWidth: 1,
borderRadius: 18,
position: "absolute",
width: "100%",
}}
/>
<View
<Pressable
style={{
backgroundColor: Palette.glass,
borderRadius: 18,
@@ -31,6 +38,7 @@ const CreateLyricsHeader = ({ title = "", subTitle = "", height = 45 }) => {
onLayout={(event) => {
setOnLayout(event.nativeEvent.layout);
}}
onPress={() => console.log("PRESSED")}
>
<BlurView
intensity={20}
@@ -61,8 +69,8 @@ const CreateLyricsHeader = ({ title = "", subTitle = "", height = 45 }) => {
</Text>
)}
</BlurView>
</View>
</>
</Pressable>
</View>
);
};
src/screens/Writing/components/CustomInput.js
+1
View File
@@ -42,6 +42,7 @@ const CustomInput = ({
color: Palette.black,
fontFamily: FONT_FAMILY.InterRegularItalic,
}}
multiline
textAlignVertical="top"
/>
</View>