From 5a4d36e1bc588a5505952861b46d068b69f5bf0f Mon Sep 17 00:00:00 2001 From: Philip Cesar Garay Date: Thu, 7 Aug 2025 21:02:22 +0800 Subject: [PATCH] update --- src/components/BorderGradientButton.js | 12 +- src/components/GradientButton.js | 7 +- src/components/ItemContainer/ItemContainer.js | 2 +- .../ItemContainer/ItemContainer.web.js | 1 + src/components/Slider.js | 113 ++++++++++++++-- src/components/modal/ValidateModal.js | 81 ++++++++++++ src/data/data.js | 72 ++++++++++ src/navigation/MainStack.js | 25 ++++ src/navigation/Routes.js | 5 + src/screens/Studio/AddPhotoCover.js | 123 ++++++++++++++++++ src/screens/Studio/ChooseGenre.js | 2 +- src/screens/Studio/ChooseInstruments.js | 9 +- src/screens/Studio/ChooseRhythm.js | 9 +- src/screens/Studio/Compose.js | 2 +- src/screens/Studio/ComposeSong.js | 10 +- src/screens/Studio/CreatingSong.js | 8 +- src/screens/Studio/CustomizeVoice.js | 12 +- src/screens/Studio/FinishCompose.js | 52 ++++++++ src/screens/Studio/PhotoCover.js | 93 +++++++++++++ src/screens/Studio/PouchReady.js | 104 +++++++++++++++ src/screens/Studio/Regenerate.js | 74 +++++++++++ src/screens/Studio/SongReady.js | 103 ++++++++++----- src/screens/Writing/CreateLyricsWithAi.js | 1 - src/screens/Writing/CreatingLyrics.js | 5 +- src/screens/Writing/CustomizeSongStructure.js | 2 +- src/screens/Writing/EmotionConvey.js | 60 +++------ src/screens/Writing/Goals.js | 2 +- src/screens/Writing/Rhymes.js | 2 +- src/screens/Writing/SongStructure.js | 2 +- src/screens/Writing/SongStyle.js | 2 +- src/screens/Writing/SongTo.js | 2 +- src/screens/Writing/SpecificityContext.js | 2 +- .../Writing/components/CreateLyricsHeader.js | 39 ++++-- src/styles/Palette.js | 1 + 34 files changed, 902 insertions(+), 137 deletions(-) create mode 100644 src/components/modal/ValidateModal.js create mode 100644 src/screens/Studio/AddPhotoCover.js create mode 100644 src/screens/Studio/FinishCompose.js create mode 100644 src/screens/Studio/PhotoCover.js create mode 100644 src/screens/Studio/PouchReady.js create mode 100644 src/screens/Studio/Regenerate.js diff --git a/src/components/BorderGradientButton.js b/src/components/BorderGradientButton.js index 0c3d6b9..f775d60 100644 --- a/src/components/BorderGradientButton.js +++ b/src/components/BorderGradientButton.js @@ -1,11 +1,16 @@ -import { View, Text, Pressable } from "react-native"; +import { View, Text, Pressable, Image } from "react-native"; import React from "react"; import BorderGradient from "./BorderGradient/BorderGradient"; import { Palette, Style } from "../styles"; import { BlurView } from "expo-blur"; import { FONT_FAMILY } from "../styles/Fonts"; +import { size } from "../styles/Style"; -const BorderGradientButton = ({ title = "J’ai déjà mes paroles", onPress }) => { +const BorderGradientButton = ({ + title = "J’ai déjà mes paroles", + onPress, + icon, +}) => { return ( + {icon && } { return ( @@ -17,13 +19,16 @@ const GradientButton = ({ colors={colors} style={{ ...Style.containerCenter, + ...Style.containerRow, height: 50, borderRadius: 14, + gap: 10, }} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} {...props} > + {icon && } { }} > - + {children} diff --git a/src/components/ItemContainer/ItemContainer.web.js b/src/components/ItemContainer/ItemContainer.web.js index 279fa4f..fd5bf44 100644 --- a/src/components/ItemContainer/ItemContainer.web.js +++ b/src/components/ItemContainer/ItemContainer.web.js @@ -40,6 +40,7 @@ const ItemContainer = ({ height = responsiveHeight(40), children }) => { > { + const offset = useSharedValue(0); + const boxWidth = useSharedValue(INITIAL_BOX_SIZE); + const [layout, setLayout] = useState(null); + + const SLIDER_WIDTH = layout?.width; + const MAX_VALUE = SLIDER_WIDTH - INITIAL_BOX_SIZE; + + const pan = Gesture.Pan().onChange((event) => { + offset.value = + Math.abs(offset.value) <= MAX_VALUE + ? offset.value + event.changeX <= 0 + ? 0 + : offset.value + event.changeX >= MAX_VALUE + ? MAX_VALUE + : offset.value + event.changeX + : offset.value; + + const newWidth = INITIAL_BOX_SIZE + offset.value; + boxWidth.value = newWidth; + }); + + const boxStyle = useAnimatedStyle(() => { + return { + width: INITIAL_BOX_SIZE + offset.value, + }; + }); + + const sliderStyle = useAnimatedStyle(() => { + return { + transform: [{ translateX: offset.value }], + }; + }); -export default (props) => { return ( - + setLayout(e.nativeEvent.layout)}> + + + + + + + + + + {value} + {maxValue} + + ); }; + +const styles = StyleSheet.create({ + box: { + height: INITIAL_BOX_SIZE, + borderRadius: 20, + position: "absolute", + zIndex: 1, + }, + sliderHandle: { + width: 20, + height: 20, + backgroundColor: "#f8f9ff", + borderRadius: 25, + position: "absolute", + zIndex: 2, + borderWidth: 4, + borderColor: "#9B4DFF", + shadowColor: "#8951FC", + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.17, + shadowRadius: 3.05, + elevation: 4, + }, + sliderTrack: { + height: 6, + backgroundColor: "#0F0C19", + borderRadius: 25, + justifyContent: "center", + }, + time: { + fontSize: 14, + color: Palette.white, + fontFamily: FONT_FAMILY.InterRegular, + }, +}); diff --git a/src/components/modal/ValidateModal.js b/src/components/modal/ValidateModal.js new file mode 100644 index 0000000..11228dd --- /dev/null +++ b/src/components/modal/ValidateModal.js @@ -0,0 +1,81 @@ +import { View, Text, Modal } from "react-native"; +import React from "react"; +import { gutters, Palette } from "../../styles"; +import { BlurView } from "expo-blur"; +import CreateLyricsHeader from "../../screens/Writing/components/CreateLyricsHeader"; +import BorderGradientButton from "../BorderGradientButton"; +import GradientButton from "../GradientButton"; +import { FONT_FAMILY } from "../../styles/Fonts"; + +const ValidateModal = ({ visible, onClose, onPressValidate }) => { + return ( + + + + + + + + Attention ! + + + Lorsque tu clique sur valider, tu ne pourra plus changer ni le + texte ni la mélodie.{" "} + + + + Valider + + + + + { + onClose(); + onPressValidate?.(); + }} + /> + + + + + + ); +}; + +export default ValidateModal; diff --git a/src/data/data.js b/src/data/data.js index 4d9b891..debca5e 100644 --- a/src/data/data.js +++ b/src/data/data.js @@ -56,3 +56,75 @@ export const CHOOSE_GENRE = [ description: "Structure simple, thèmes sur les épreuves de la vie.", }, ]; + +export const VOICE = [ + "Une voix féminine interpretra ta chanson.", + "Une voix masculine interpretera ta chanson.", + "Deux voix pour interpreter ta chanson.", + "Solo vocal puissant et dramatique.", + "Un chœur gospel pour (dimension spirituelle ou émotionnelle).", + "Un cri brut et puissant (émotion intense).", + "Un couplet interprété en rap.", + "Voix qui raconte une histoire, souvent sans chanter.", + "Paroles déclamées plutôt que chantées, souvent dans un style poétique ou de slam.", + "Technique vocale entre parler et chanter, typique de la musique expressionniste.", + "Sensibilité ", + "Voix séduisante et sensuelle.", + "Voix profonde et résonnante.", + "Voix légère et aérienne.", + "Voix relaxante et sophistiquée.", + "Voix synthétique.", + "Voix découpées pour un style EDM ou future bass.", + "Effet de distorsion (rendu + agressif).", + "Slam (Chant parlé).", + "Rap moderne.", + "Technique", + "Chant chargé d'émotion.", + "Technique vocale rugueuse pour le métal ou le rock.", + "Voix robotisée ou mécanique, genres électro ou futuristes.", + "Voix étrange (atmosphère de science-fiction ou de mystère).", + "Voix grave et intimidante (effet dramatique).", + "Voix pure et céleste, évoquant la tranquillité ou le divin.", + "Voix douce et aérienne, avec une touche d'intimité.", + "Voix chantée dans une tonalité plus aiguë que la normale.", + "Voix d'enfant (+ d'innocence).", + "Chant en murmure (+ intime).", + "Multiples voix superposées (effet harmonique riche).", + "Voix légère et innocente.", + "Voix soprano puissante (style opéra).", + "Chant puissant (styles pop et Broadway).", + "Mélange subtil de chuchotements et d’harmoniques.", + "Voix rauque et granuleuse, utilisée dans le blues ou le rock.", + "Chœur avec une tonalité légère et céleste.", + "Inspiration et expiration sonores (effets dramatiques).", + "Changements de volume ou de tonalité dans une même phrase.", +]; + +export const INSTRUMENTS = [ + "Piano classique", + "Piano éléctrique", + "Synthétiseur", + "Guitare acoustique", + "Guitare électrique", + "Banjo", + "Violon", + "Saxophone", + "Saxophone alto", + "Trompette", + "Flûte", + "Clarinette", + "Clarinette basse", + "Djembe", + "Bongos", + "Congas", + "Harmonica", + "Handpan", + "Harpe", + "Xylophone", + "Mandoline", + "Accordéon", + "Orgue", + "Electronique ", +]; + +export const RHYTHM = ["Très rapide", "Rapide", "Normal", "Lent", "Très lent"]; diff --git a/src/navigation/MainStack.js b/src/navigation/MainStack.js index 336fe8a..02faecc 100644 --- a/src/navigation/MainStack.js +++ b/src/navigation/MainStack.js @@ -25,6 +25,11 @@ import ComposeSong from "../screens/Studio/ComposeSong"; import Compose from "../screens/Studio/Compose"; import CustomizeVoice from "../screens/Studio/CustomizeVoice"; import SongReady from "../screens/Studio/SongReady"; +import Regenerate from "../screens/Studio/Regenerate"; +import PouchReady from "../screens/Studio/PouchReady"; +import PhotoCover from "../screens/Studio/PhotoCover"; +import AddPhotoCover from "../screens/Studio/AddPhotoCover"; +import FinishCompose from "../screens/Studio/FinishCompose"; const screenOptions = { headerShown: false, @@ -108,6 +113,26 @@ const screens = [ name: Routes.SongReady, component: SongReady, }, + { + name: Routes.Regenerate, + component: Regenerate, + }, + { + name: Routes.PouchReady, + component: PouchReady, + }, + { + name: Routes.PhotoCover, + component: PhotoCover, + }, + { + name: Routes.AddPhotoCover, + component: AddPhotoCover, + }, + { + name: Routes.FinishCompose, + component: FinishCompose, + }, ]; export default function Main() { diff --git a/src/navigation/Routes.js b/src/navigation/Routes.js index 4e0225f..fcda3e3 100644 --- a/src/navigation/Routes.js +++ b/src/navigation/Routes.js @@ -34,4 +34,9 @@ export const Routes = { ComposeSong: "ComposeSong", CustomizeVoice: "CustomizeVoice", SongReady: "SongReady", + Regenerate: "Regenerate", + PouchReady: "PouchReady", + PhotoCover: "PhotoCover", + AddPhotoCover: "AddPhotoCover", + FinishCompose: "FinishCompose", }; diff --git a/src/screens/Studio/AddPhotoCover.js b/src/screens/Studio/AddPhotoCover.js new file mode 100644 index 0000000..4db53cf --- /dev/null +++ b/src/screens/Studio/AddPhotoCover.js @@ -0,0 +1,123 @@ +import { View, Text, Image } from "react-native"; +import React, { useState } from "react"; +import MusicLandHeader from "../../components/MusicLandHeader"; +import { background, icons, img } from "../../assets"; +import Page from "../../layouts/Page"; +import { goBack, navigate } from "../../navigation/NavigationService"; +import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader"; +import { gutters, Palette, Style } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import BorderGradientButton from "../../components/BorderGradientButton"; +import GradientButton from "../../components/GradientButton"; +import { launchImageLibraryAsync } from "expo-image-picker"; +import { Routes } from "../../navigation"; + +const AddPhotoCover = () => { + const [image, setImage] = useState(null); + + const onPressAddImage = async () => { + const result = await launchImageLibraryAsync({ + mediaTypes: ["images"], + allowsEditing: true, + aspect: [4, 3], + quality: 1, + }); + + if (!result.canceled) { + setImage(result.assets[0]?.uri); + } + }; + + return ( + + + + + + + + + + + + + Lust for Life + + + Lana del Rey + + + + + + + + + + + navigate(Routes.FinishCompose)} + /> + + + ); +}; + +export default AddPhotoCover; diff --git a/src/screens/Studio/ChooseGenre.js b/src/screens/Studio/ChooseGenre.js index de5a103..4434135 100644 --- a/src/screens/Studio/ChooseGenre.js +++ b/src/screens/Studio/ChooseGenre.js @@ -10,7 +10,7 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer"; const ChooseGenre = () => { return ( - + { const [containerLayout, setContainerLayout] = useState(null); return ( - + { > ( + renderItem={({ item }) => ( { justifyContent: "center", }} > - Piano classique + {item} )} diff --git a/src/screens/Studio/ChooseRhythm.js b/src/screens/Studio/ChooseRhythm.js index 8c49289..7b6b945 100644 --- a/src/screens/Studio/ChooseRhythm.js +++ b/src/screens/Studio/ChooseRhythm.js @@ -5,18 +5,19 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer"; import { BlurView } from "expo-blur"; import { Palette } from "../../styles"; import { FONT_FAMILY } from "../../styles/Fonts"; +import { RHYTHM } from "../../data/data"; const ChooseRhythm = () => { return ( - + ( + renderItem={({ item }) => ( { justifyContent: "center", }} > - Très rapide + {item} )} diff --git a/src/screens/Studio/Compose.js b/src/screens/Studio/Compose.js index 726b58c..fef278d 100644 --- a/src/screens/Studio/Compose.js +++ b/src/screens/Studio/Compose.js @@ -12,7 +12,7 @@ const Compose = () => { return ( - + diff --git a/src/screens/Studio/ComposeSong.js b/src/screens/Studio/ComposeSong.js index 2b1bc15..62bf5be 100644 --- a/src/screens/Studio/ComposeSong.js +++ b/src/screens/Studio/ComposeSong.js @@ -19,13 +19,12 @@ const { width } = Dimensions.get("window"); const ComposeSong = () => { const scrollRef = useRef(null); const [selectedIndex, setSelectedIndex] = useState(0); - const [progress, setProgress] = useState(14.2); + const [progress, setProgress] = useState(18); const [containerLayout, setContainerLayout] = useState(null); - console.log("progress: ", progress); const onPressNext = () => { setSelectedIndex(selectedIndex + 1); - setProgress(progress + 7.1); + setProgress(progress + 9); scrollRef.current.scrollToIndex({ index: selectedIndex + 1, animated: true, @@ -35,7 +34,7 @@ const ComposeSong = () => { const onPressBack = () => { if (selectedIndex > 0) { setSelectedIndex(selectedIndex - 1); - setProgress(progress - 7.1); + setProgress(progress - 9); scrollRef.current.scrollToIndex({ index: selectedIndex - 1, animated: true, @@ -47,9 +46,8 @@ const ComposeSong = () => { return ( - - + setContainerLayout(event.nativeEvent.layout)} diff --git a/src/screens/Studio/CreatingSong.js b/src/screens/Studio/CreatingSong.js index 734db7f..a32a78a 100644 --- a/src/screens/Studio/CreatingSong.js +++ b/src/screens/Studio/CreatingSong.js @@ -6,7 +6,7 @@ import Style, { size } from "../../styles/Style"; import { Palette } from "../../styles"; import { FONT_FAMILY } from "../../styles/Fonts"; import ProgressBar from "../../components/ProgressBar"; -import { navigate } from "../../navigation/NavigationService"; +import { goBack, navigate } from "../../navigation/NavigationService"; import { Routes } from "../../navigation"; import GradientButton from "../../components/GradientButton"; @@ -19,7 +19,7 @@ const CreatingSong = ({ active }) => { setProgress((prevProgress) => { if (prevProgress >= 100) { clearInterval(interval); - navigate(Routes.SongReady) + return 100; } return prevProgress + 1; @@ -34,6 +34,7 @@ const CreatingSong = ({ active }) => { @@ -69,6 +70,7 @@ const CreatingSong = ({ active }) => { > { left: 10, zIndex: 3, }} - onPress={() => console.log("Pressed")} + onPress={goBack} > diff --git a/src/screens/Studio/CustomizeVoice.js b/src/screens/Studio/CustomizeVoice.js index 12d0b54..fbe9e9c 100644 --- a/src/screens/Studio/CustomizeVoice.js +++ b/src/screens/Studio/CustomizeVoice.js @@ -5,12 +5,13 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer"; import { Palette, Style } from "../../styles"; import { FONT_FAMILY } from "../../styles/Fonts"; import { BlurView } from "expo-blur"; +import { VOICE } from "../../data/data"; const CustomizeVoice = () => { const [containerLayout, setContainerLayout] = useState(null); return ( - + { Base ( + renderItem={({ item }) => ( { flex: 1, backgroundColor: Palette.glass, paddingHorizontal: 12, - justifyContent: "center", + paddingVertical: 14, }} > - Une voix féminine interpretra ta chanson. + {item} )} @@ -70,7 +71,6 @@ const styles = StyleSheet.create({ paddingBottom: 50, }, itemContainer: { - height: 54, backgroundColor: Palette.glass, borderRadius: 14, overflow: "hidden", diff --git a/src/screens/Studio/FinishCompose.js b/src/screens/Studio/FinishCompose.js new file mode 100644 index 0000000..a3cf5b7 --- /dev/null +++ b/src/screens/Studio/FinishCompose.js @@ -0,0 +1,52 @@ +import { View, Text, Image, StyleSheet } from "react-native"; +import React from "react"; +import { ai, background } from "../../assets"; +import Page from "../../layouts/Page"; +import { goBack, navigate } from "../../navigation/NavigationService"; +import MusicLandHeader from "../../components/MusicLandHeader"; +import { gutters } from "../../styles"; +import { Routes } from "../../navigation"; +import GradientButton from "../../components/GradientButton"; +import BorderGradientButton from "../../components/BorderGradientButton"; + +const FinishCompose = () => { + return ( + + + + + + navigate(Routes.Onboarding)} + /> + navigate(Routes.Onboarding)} + /> + + + + ); +}; + +export default FinishCompose; + +const styles = StyleSheet.create({ + img: { + width: "100%", + height: "70%", + position: "absolute", + bottom: -40, + right: -30, + }, +}); diff --git a/src/screens/Studio/PhotoCover.js b/src/screens/Studio/PhotoCover.js new file mode 100644 index 0000000..d6a37fa --- /dev/null +++ b/src/screens/Studio/PhotoCover.js @@ -0,0 +1,93 @@ +import { View, Text, Image } from "react-native"; +import React from "react"; +import MusicLandHeader from "../../components/MusicLandHeader"; +import { background, icons, img } from "../../assets"; +import Page from "../../layouts/Page"; +import { goBack, navigate } from "../../navigation/NavigationService"; +import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader"; +import { gutters, Palette, Style } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import BorderGradientButton from "../../components/BorderGradientButton"; +import { Routes } from "../../navigation"; +import GradientButton from "../../components/GradientButton"; + +const PhotoCover = () => { + return ( + + + + + + + + + + Lust for Life + + + Lana del Rey + + + + + + + + + + + navigate(Routes.AddPhotoCover)} + /> + + + ); +}; + +export default PhotoCover; diff --git a/src/screens/Studio/PouchReady.js b/src/screens/Studio/PouchReady.js new file mode 100644 index 0000000..8ccfc50 --- /dev/null +++ b/src/screens/Studio/PouchReady.js @@ -0,0 +1,104 @@ +import { View, Text, Image } from "react-native"; +import React from "react"; +import Page from "../../layouts/Page"; +import { background, icons, img } from "../../assets"; +import MusicLandHeader from "../../components/MusicLandHeader"; +import { goBack, navigate } from "../../navigation/NavigationService"; +import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader"; +import { gutters, Palette, Style } from "../../styles"; +import BorderGradientButton from "../../components/BorderGradientButton"; +import GradientButton from "../../components/GradientButton"; +import { Routes } from "../../navigation"; +import { FONT_FAMILY } from "../../styles/Fonts"; + +const PouchReady = () => { + return ( + + + + + + + + + + Lust for Life + + + Lana del Rey + + + + + + + + + + + navigate(Routes.Regenerate, { + progress: 72, + }) + } + /> + navigate(Routes.PhotoCover)} + /> + + + ); +}; + +export default PouchReady; diff --git a/src/screens/Studio/Regenerate.js b/src/screens/Studio/Regenerate.js new file mode 100644 index 0000000..9446a4c --- /dev/null +++ b/src/screens/Studio/Regenerate.js @@ -0,0 +1,74 @@ +import { View, Text } from "react-native"; +import React from "react"; +import Page from "../../layouts/Page"; +import { background, icons } from "../../assets"; +import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader"; +import MusicLandHeader from "../../components/MusicLandHeader"; +import { goBack } from "../../navigation/NavigationService"; +import { gutters, Palette } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import GradientButton from "../../components/GradientButton"; +import { useRoute } from "@react-navigation/core"; + +const Regenerate = () => { + const params = useRoute().params; + + return ( + + + + + + + + + Hip Hop/Rap + {" "} + : Musique commerciale destinée au grand public, accrocheuse et + mélodique. Domine les charts internationaux avec des artistes + ultra-médiatisés. + + + + + + Banjo{"\n"}Violon{"\n"} + Saxophone{"\n"} + Piano classique{"\n"} + + + + + + + ); +}; + +export default Regenerate; diff --git a/src/screens/Studio/SongReady.js b/src/screens/Studio/SongReady.js index 0be8a40..059b498 100644 --- a/src/screens/Studio/SongReady.js +++ b/src/screens/Studio/SongReady.js @@ -1,45 +1,88 @@ -import { View, Text } from "react-native"; -import React from "react"; +import React, { useState } from "react"; import Page from "../../layouts/Page"; -import { background } from "../../assets"; +import { background, icons } from "../../assets"; import MusicLandHeader from "../../components/MusicLandHeader"; -import { goBack } from "../../navigation/NavigationService"; -import { LinearGradient } from "../../components/LinearGradient/LinearGradient"; +import { goBack, navigate } from "../../navigation/NavigationService"; import Slider from "../../components/Slider"; +import { Image, Pressable, View } from "react-native"; +import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader"; +import { BlurView } from "expo-blur"; +import { Style } from "../../styles"; +import { responsiveWidth } from "react-native-responsive-dimensions"; +import { gutters, size } from "../../styles/Style"; +import BorderGradientButton from "../../components/BorderGradientButton"; +import GradientButton from "../../components/GradientButton"; +import { Routes } from "../../navigation"; +import ValidateModal from "../../components/modal/ValidateModal"; const SongReady = () => { + const [showValidateModal, setShowValidateModal] = useState(false); + return ( - - - - + + + - - - + + + + + + + + + + + + + navigate(Routes.Regenerate, { + progress: 63, + }) + } + /> + setShowValidateModal(true)} /> + setShowValidateModal(false)} + onPressValidate={() => navigate(Routes.PouchReady)} + /> ); }; diff --git a/src/screens/Writing/CreateLyricsWithAi.js b/src/screens/Writing/CreateLyricsWithAi.js index 167e251..a32c5ef 100644 --- a/src/screens/Writing/CreateLyricsWithAi.js +++ b/src/screens/Writing/CreateLyricsWithAi.js @@ -57,7 +57,6 @@ const CreateLyricsWithAi = () => { { @@ -19,7 +19,6 @@ const CreatingLyrics = ({ active }) => { setProgress((prevProgress) => { if (prevProgress >= 100) { clearInterval(interval); - navigate(Routes.Lyrics) return 100; } return prevProgress + 1; @@ -80,7 +79,7 @@ const CreatingLyrics = ({ active }) => { left: 10, zIndex: 3, }} - onPress={() => console.log("Pressed")} + onPress={goBack} > diff --git a/src/screens/Writing/CustomizeSongStructure.js b/src/screens/Writing/CustomizeSongStructure.js index 7603518..8261c5c 100644 --- a/src/screens/Writing/CustomizeSongStructure.js +++ b/src/screens/Writing/CustomizeSongStructure.js @@ -10,7 +10,7 @@ const CustomizeSongStructure = () => { const [containerLayout, setContainerLayout] = useState(null); return ( - + { - const [itemLayout, setItemLayout] = useState([]); - return ( - + { gap: 16, flexGrow: 1, zIndex: 2, + paddingTop: 5, }} renderItem={({ item, index }) => ( - - - { - e.persist(); - setItemLayout((prev) => [...prev, e.nativeEvent.layout]); - }} - > - + + - - - {item.title} - {" "} - : {item.description} - - - + + {item.title} + {" "} + : {item.description} + + )} /> diff --git a/src/screens/Writing/Goals.js b/src/screens/Writing/Goals.js index 498dfb0..b2302f1 100644 --- a/src/screens/Writing/Goals.js +++ b/src/screens/Writing/Goals.js @@ -10,7 +10,7 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer"; const Goals = () => { return ( - + diff --git a/src/screens/Writing/Rhymes.js b/src/screens/Writing/Rhymes.js index d83565a..51dc85e 100644 --- a/src/screens/Writing/Rhymes.js +++ b/src/screens/Writing/Rhymes.js @@ -8,7 +8,7 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer"; const Rhymes = () => { return ( - + diff --git a/src/screens/Writing/SongStructure.js b/src/screens/Writing/SongStructure.js index 029e76c..21ef050 100644 --- a/src/screens/Writing/SongStructure.js +++ b/src/screens/Writing/SongStructure.js @@ -9,7 +9,7 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer"; const SongStructure = () => { return ( - + { return ( - + { return ( - + diff --git a/src/screens/Writing/SpecificityContext.js b/src/screens/Writing/SpecificityContext.js index e810fb8..c94a9f6 100644 --- a/src/screens/Writing/SpecificityContext.js +++ b/src/screens/Writing/SpecificityContext.js @@ -5,7 +5,7 @@ import CustomInput from "./components/CustomInput"; const SpecificityContext = () => { return ( - + { +const CreateLyricsHeader = ({ + title = "", + subTitle = "", + children, + colors = ["#FFFFFF00", "#FFFFFF"], + gradientProps, + intensity = 40, + tint = "dark", +}) => { const [onLayout, setOnLayout] = useState(null); const { isWeb } = useLayoutType(); return ( - + { onPress={() => console.log("PRESSED")} > - - {title} - + {title && ( + + {title} + + )} {subTitle && ( { {subTitle} )} + {children} diff --git a/src/styles/Palette.js b/src/styles/Palette.js index 107552a..3e882e2 100644 --- a/src/styles/Palette.js +++ b/src/styles/Palette.js @@ -35,6 +35,7 @@ const Palette = { glass: "#73737324", grayMid: "#8C8C8C", + gray: "#E5E5E5", }; export default Palette;