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-01 21:05:44 +08:00
parent 84fc719a10
commit e22b87bd49
18 changed files with 500 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Writing/CreateLyricsWithAi.js
+88
View File
@@ -0,0 +1,88 @@
import { View, Text, ScrollView, 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";
import Goals from "./Goals";
import { goBack } from "../../navigation/NavigationService";
import SpecificityContext from "./SpecificityContext";
import EmotionConvey from "./EmotionConvey";
const { width } = Dimensions.get("window");
const CreateLyricsWithAi = () => {
const scrollRef = useRef(null);
const [selectedIndex, setSelectedIndex] = useState(0);
const [progress, setProgress] = useState(8);
const onPressNext = () => {
setSelectedIndex(selectedIndex + 1);
setProgress(progress + 8);
scrollRef.current.scrollToIndex({
index: selectedIndex + 1,
animated: true,
});
};
const onPressBack = () => {
if (selectedIndex > 0) {
setSelectedIndex(selectedIndex - 1);
setProgress(progress - 8);
scrollRef.current.scrollToIndex({
index: selectedIndex - 1,
animated: true,
});
} else {
goBack();
}
};
return (
<Page headerType="NONE">
<MusicLandHeader onPressBack={onPressBack} progress={progress} />
<View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
<View style={{ flex: 1 }}>
<SwiperFlatList
style={{ width, left: -gutters }}
ref={scrollRef}
disableGesture
>
<View
style={{
width: width,
height: "100%",
paddingHorizontal: gutters,
}}
>
<Goals />
</View>
<View
style={{
width: width,
height: "100%",
paddingHorizontal: gutters,
}}
>
<SpecificityContext />
</View>
<View
style={{
width: width,
height: "100%",
paddingHorizontal: gutters,
}}
>
<EmotionConvey />
</View>
</SwiperFlatList>
</View>
<GradientButton title="Suivant" onPress={onPressNext} />
</View>
</Page>
);
};
export default CreateLyricsWithAi;
src/screens/Writing/EmotionConvey.js
+104
View File
@@ -0,0 +1,104 @@
import { View, Text, StyleSheet, FlatList } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
const EmotionConvey = () => {
const [itemLayout, setItemLayout] = useState([]);
console.log("itemLayout: ", itemLayout);
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader
title={`Quel émotion veux-tu\ntransmettre ?`}
subTitle="Sélectionne tes intentions émotionnelles. (2 max)"
/>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={styles.borderGradientStyle}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
<FlatList
data={Array.from({ length: 3 })}
contentContainerStyle={{ gap: 16 }}
renderItem={({ item, index }) => (
<View>
<BorderGradient
gradientProps={{
colors: ["#FBFF00", "#99999900"],
}}
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 }}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
La Joie
</Text>{" "}
: expose un bonheur profond, l'émerveillement, la
gratitude, satisfaction intense, énergie positive.
</Text>
</BlurView>
</View>
</View>
)}
/>
</BlurView>
</View>
</BorderGradient>
</View>
);
};
export default EmotionConvey;
const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
height: responsiveHeight(55),
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
},
blurContainer: {
flex: 1,
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
},
});
src/screens/Writing/Goals.js
+105
View File
@@ -0,0 +1,105 @@
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";
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>
</View>
<CustomInput
label="Tu as un autre objectif?"
placeholder="Décrire l’objectif"
/>
</View>
);
};
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,
},
itemContainer: {
height: 54,
backgroundColor: Palette.glass,
borderRadius: 14,
overflow: "hidden",
shadowColor: "#00000040",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
itemText: {
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
});
src/screens/Writing/SpecificityContext.js
+19
View File
@@ -0,0 +1,19 @@
import { View, Text } from "react-native";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import CustomInput from "./components/CustomInput";
import { gutters } from "../../styles";
const SpecificityContext = () => {
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader
title="Spécificité du contexte"
subTitle="Dis-nous en un peu plus pour qu’on puisse mieux t’aider."
/>
<CustomInput placeholder="Ecrire mon contexte" height={283} />
</View>
);
};
export default SpecificityContext;
src/screens/Writing/WritingLyrics.js
+6 -2
View File
@@ -6,7 +6,8 @@ import GradientButton from "../../components/GradientButton";
import { gutters } from "../../styles";
import BorderGradientButton from "../../components/BorderGradientButton";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack } from "../../navigation/NavigationService";
import { goBack, navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
const WritingLyrics = () => {
return (
@@ -24,7 +25,10 @@ const WritingLyrics = () => {
}}
>
<BorderGradientButton />
<GradientButton title="Écrire des paroles avec une IA" />
<GradientButton
title="Écrire des paroles avec une IA"
onPress={() => navigate(Routes.CreateLyricsWithAi)}
/>
</View>
</View>
</Page>
src/screens/Writing/components/CreateLyricsHeader.js
+69
View File
@@ -0,0 +1,69 @@
import { View, Text } 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";
const CreateLyricsHeader = ({ title = "", subTitle = "", height = 45 }) => {
const [onLayout, setOnLayout] = useState(null);
return (
<>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={{
height: onLayout?.height,
borderWidth: 1,
borderRadius: 18,
position: "absolute",
width: "100%",
}}
/>
<View
style={{
backgroundColor: Palette.glass,
borderRadius: 18,
overflow: "hidden",
}}
onLayout={(event) => {
setOnLayout(event.nativeEvent.layout);
}}
>
<BlurView
intensity={20}
style={{
paddingHorizontal: 12,
paddingVertical: 8,
gap: 4,
}}
>
<Text
style={{
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
}}
>
{title}
</Text>
{subTitle && (
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
{subTitle}
</Text>
)}
</BlurView>
</View>
</>
);
};
export default CreateLyricsHeader;
src/screens/Writing/components/CustomInput.js
+52
View File
@@ -0,0 +1,52 @@
import { View, Text, TextInput } from "react-native";
import React from "react";
import { Palette } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
const CustomInput = ({
label = "",
placeholder = "",
value,
setValue,
height = 65,
}) => {
return (
<View style={{ gap: 8 }}>
{label && (
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterMedium,
}}
>
{label}
</Text>
)}
<View
style={{
backgroundColor: Palette.white,
height,
padding: 12,
borderRadius: 12,
}}
>
<TextInput
placeholder={placeholder}
placeholderTextColor={Palette.grayMid}
value={value}
onChangeText={setValue}
style={{
height: "100%",
fontSize: 16,
color: Palette.black,
fontFamily: FONT_FAMILY.InterRegularItalic,
}}
textAlignVertical="top"
/>
</View>
</View>
);
};
export default CustomInput;