diff --git a/index.web.js b/index.web.js index a3edc4d..3edf4ba 100644 --- a/index.web.js +++ b/index.web.js @@ -1,3 +1,4 @@ +import "@expo/metro-runtime"; import { registerRootComponent } from "expo"; import "./src/styles/css/global.css"; diff --git a/src/assets/UI/theo.png b/src/assets/UI/theo.png index 6e6216f..4eb0ba7 100644 Binary files a/src/assets/UI/theo.png and b/src/assets/UI/theo.png differ diff --git a/src/components/BorderGradient/BorderGradient.web.js b/src/components/BorderGradient/BorderGradient.web.js index ea3f10f..9a94225 100644 --- a/src/components/BorderGradient/BorderGradient.web.js +++ b/src/components/BorderGradient/BorderGradient.web.js @@ -5,20 +5,20 @@ const BorderGradient = ({ children, gradientProps, ...props }) => { const defaultGradientProps = { start: { x: 0.5, - y: 0 + y: 0, }, end: { x: 0.5, - y: 1 + y: 1, }, locations: [], colors: [], useAngle: false, - angle: 0 + angle: 0, }; const { locations, end, start, useAngle, angle, onLayout, colors } = - gradientProps; + gradientProps; const { style, @@ -31,7 +31,7 @@ const BorderGradient = ({ children, gradientProps, ...props }) => { borderTopWidth, borderLeftWidth, borderRightWidth, - borderBottomWidth + borderBottomWidth, } = props; const propStart = start ?? defaultGradientProps?.start; @@ -39,13 +39,13 @@ const BorderGradient = ({ children, gradientProps, ...props }) => { const [state, setState] = useState({ width: 1, - height: 1 + height: 1, }); const measure = (event) => { setState({ width: event.nativeEvent.layout.width, - height: event.nativeEvent.layout.height + height: event.nativeEvent.layout.height, }); if (onLayout) { onLayout(event); @@ -59,62 +59,62 @@ const BorderGradient = ({ children, gradientProps, ...props }) => { // Math.atan2 handles Infinity const _angle = - Math.atan2( - state.width * (propEnd.y - propStart.y), - state.height * (propEnd.x - propStart.x) - ) + - Math.PI / 2; + Math.atan2( + state.width * (propEnd.y - propStart.y), + state.height * (propEnd.x - propStart.x) + ) + + Math.PI / 2; return _angle + "rad"; }; const getColors = () => - colors. - map((color, index) => { - const location = locations?.[index] ?? defaultGradientProps.locations; - let locationStyle = ""; - if (location) { - locationStyle = " " + location * 100 + "%"; - } - return color + locationStyle; - }). - join(","); + colors + .map((color, index) => { + const location = locations?.[index] ?? defaultGradientProps.locations; + let locationStyle = ""; + if (location) { + locationStyle = " " + location * 100 + "%"; + } + return color + locationStyle; + }) + .join(","); return ( - + position: "relative", + }} + > - + style, + { + borderWidth, + borderRadius, + borderTopLeftRadius, + borderTopRightRadius, + borderBottomLeftRadius, + borderBottomRightRadius, + borderTopWidth, + borderLeftWidth, + borderRightWidth, + borderBottomWidth, + borderStyle: "solid", + borderColor: "transparent", + // borderImage: `linear-gradient(${getAngle()},${getColors()}) 1`, + background: `linear-gradient(${getAngle()},${getColors()}) border-box`, + WebkitMask: + "linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0)", + WebkitMaskComposite: "xor", + maskComposite: "exclude", + overflow: "hidden", + }, + ]} + > {children} - ); - + + ); }; export default BorderGradient; @@ -122,7 +122,6 @@ export default BorderGradient; const styles = StyleSheet.create({ innerContainer: { flex: 1, - margin: 5, // <-- Border Width position: "absolute", top: 0, bottom: 0, @@ -130,6 +129,6 @@ const styles = StyleSheet.create({ justifyContent: "center", right: 0, left: 0, - overflow: "hidden" - } -}); \ No newline at end of file + overflow: "hidden", + }, +}); diff --git a/src/components/BorderGradientButton.js b/src/components/BorderGradientButton.js index 1768a38..0c3d6b9 100644 --- a/src/components/BorderGradientButton.js +++ b/src/components/BorderGradientButton.js @@ -5,17 +5,21 @@ import { Palette, Style } from "../styles"; import { BlurView } from "expo-blur"; import { FONT_FAMILY } from "../styles/Fonts"; -const BorderGradientButton = ({ title = "J’ai déjà mes paroles" }) => { +const BorderGradientButton = ({ title = "J’ai déjà mes paroles", onPress }) => { return ( - + { borderRadius: 14, overflow: "hidden", backgroundColor: "#73737324", + width: "100%", + height: "100%", }} > { + return ( + + + + {children} + + + + ); +}; + +export default ItemContainer; + +const styles = StyleSheet.create({ + borderGradientStyle: { + borderWidth: 1, + borderRadius: 20, + shadowColor: "#000", + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.25, + shadowRadius: 3.84, + elevation: 100, + }, + blurContainer: { + flex: 1, + borderRadius: 20, + overflow: "hidden", + zIndex: 1, + }, +}); diff --git a/src/components/ItemContainer/ItemContainer.web.js b/src/components/ItemContainer/ItemContainer.web.js new file mode 100644 index 0000000..279fa4f --- /dev/null +++ b/src/components/ItemContainer/ItemContainer.web.js @@ -0,0 +1,75 @@ +import { View, Text, StyleSheet } from "react-native"; +import React, { useState } from "react"; +import BorderGradient from "../BorderGradient/BorderGradient"; +import { responsiveHeight } from "react-native-responsive-dimensions"; +import { BlurView } from "expo-blur"; +import { Style } from "../../styles"; + +const ItemContainer = ({ height = responsiveHeight(40), children }) => { + const [containerLayout, setContainerLayout] = useState(null); + + return ( + + + { + setContainerLayout(e.nativeEvent.layout); + }} + > + + {children} + + + + ); +}; + +export default ItemContainer; + +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%", + }, +}); diff --git a/src/components/Slider.js b/src/components/Slider.js index 91792a0..10561d8 100644 --- a/src/components/Slider.js +++ b/src/components/Slider.js @@ -5,7 +5,7 @@ import { Palette } from "../styles"; export default (props) => { return ( { + return ( + + + + ( + + + + + {item.title} + {" "} + : {item.description} + + + + )} + /> + + + ); +}; + +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), + }, +}); diff --git a/src/screens/Studio/ChooseInstruments.js b/src/screens/Studio/ChooseInstruments.js new file mode 100644 index 0000000..6066ae1 --- /dev/null +++ b/src/screens/Studio/ChooseInstruments.js @@ -0,0 +1,79 @@ +import { View, Text, FlatList, StyleSheet } from "react-native"; +import React, { useState } from "react"; +import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader"; +import ItemContainer from "../../components/ItemContainer/ItemContainer"; +import { Palette } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import { BlurView } from "expo-blur"; + +const ChooseInstruments = () => { + const [containerLayout, setContainerLayout] = useState(null); + + return ( + + + setContainerLayout(event.nativeEvent.layout)} + > + + ( + + + Piano classique + + + )} + /> + + + + ); +}; + +export default ChooseInstruments; + +const styles = StyleSheet.create({ + contentContainer: { + flexGrow: 1, + padding: 8, + gap: 10, + backgroundColor: "#FFFFFF00", + paddingBottom: 50, + }, + 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, + }, +}); diff --git a/src/screens/Studio/ChooseRhythm.js b/src/screens/Studio/ChooseRhythm.js new file mode 100644 index 0000000..8c49289 --- /dev/null +++ b/src/screens/Studio/ChooseRhythm.js @@ -0,0 +1,70 @@ +import { View, Text, FlatList, StyleSheet } from "react-native"; +import React from "react"; +import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader"; +import ItemContainer from "../../components/ItemContainer/ItemContainer"; +import { BlurView } from "expo-blur"; +import { Palette } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; + +const ChooseRhythm = () => { + return ( + + + + + ( + + + Très rapide + + + )} + /> + + + + ); +}; + +export default ChooseRhythm; + +const styles = StyleSheet.create({ + contentContainer: { + flexGrow: 1, + padding: 8, + gap: 10, + backgroundColor: "#FFFFFF00", + }, + 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, + }, +}); diff --git a/src/screens/Studio/Compose.js b/src/screens/Studio/Compose.js new file mode 100644 index 0000000..726b58c --- /dev/null +++ b/src/screens/Studio/Compose.js @@ -0,0 +1,46 @@ +import { View, Text, StyleSheet, Image } 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 { Routes } from "../../navigation"; +import GradientButton from "../../components/GradientButton"; +import { gutters } from "../../styles"; + +const Compose = () => { + return ( + + + + + + navigate(Routes.ComposeSong)} + /> + + + + ); +}; + +export default Compose; + +const styles = StyleSheet.create({ + img: { + width: "100%", + height: "70%", + position: "absolute", + bottom: -40, + right: -30, + }, +}); diff --git a/src/screens/Studio/ComposeSong.js b/src/screens/Studio/ComposeSong.js index 6d35847..2b1bc15 100644 --- a/src/screens/Studio/ComposeSong.js +++ b/src/screens/Studio/ComposeSong.js @@ -1,10 +1,127 @@ -import { View, Text } from "react-native"; -import React from "react"; +import { View, Text, Image, StyleSheet, Dimensions } from "react-native"; +import React, { useRef, useState } from "react"; import Page from "../../layouts/Page"; -import { background } from "../../assets"; +import { ai, background } from "../../assets"; +import MusicLandHeader from "../../components/MusicLandHeader"; +import GradientButton from "../../components/GradientButton"; +import { goBack, navigate } from "../../navigation/NavigationService"; +import { Routes } from "../../navigation"; +import { gutters } from "../../styles"; +import SwiperFlatList from "react-native-swiper-flatlist"; +import ChooseGenre from "./ChooseGenre"; +import CustomizeVoice from "./CustomizeVoice"; +import ChooseInstruments from "./ChooseInstruments"; +import ChooseRhythm from "./ChooseRhythm"; +import CreatingSong from "./CreatingSong"; + +const { width } = Dimensions.get("window"); const ComposeSong = () => { - return ; + const scrollRef = useRef(null); + const [selectedIndex, setSelectedIndex] = useState(0); + const [progress, setProgress] = useState(14.2); + const [containerLayout, setContainerLayout] = useState(null); + console.log("progress: ", progress); + + const onPressNext = () => { + setSelectedIndex(selectedIndex + 1); + setProgress(progress + 7.1); + scrollRef.current.scrollToIndex({ + index: selectedIndex + 1, + animated: true, + }); + }; + + const onPressBack = () => { + if (selectedIndex > 0) { + setSelectedIndex(selectedIndex - 1); + setProgress(progress - 7.1); + scrollRef.current.scrollToIndex({ + index: selectedIndex - 1, + animated: true, + }); + } else { + goBack(); + } + }; + + return ( + + + + + setContainerLayout(event.nativeEvent.layout)} + > + + + + + + + + + + + + + + + + + + + {selectedIndex !== 4 && ( + + )} + + + ); }; export default ComposeSong; + +const styles = StyleSheet.create({ + img: { + width: "100%", + height: "70%", + position: "absolute", + bottom: -40, + right: -30, + }, +}); diff --git a/src/screens/Studio/CreatingSong.js b/src/screens/Studio/CreatingSong.js new file mode 100644 index 0000000..734db7f --- /dev/null +++ b/src/screens/Studio/CreatingSong.js @@ -0,0 +1,126 @@ +import { View, Text, Image, Pressable } from "react-native"; +import React, { useEffect, useState } from "react"; +import { ai, icons } from "../../assets"; +import { BlurView } from "expo-blur"; +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 { Routes } from "../../navigation"; +import GradientButton from "../../components/GradientButton"; + +const CreatingSong = ({ active }) => { + const [progress, setProgress] = useState(0); + + useEffect(() => { + if (active) { + const interval = setInterval(() => { + setProgress((prevProgress) => { + if (prevProgress >= 100) { + clearInterval(interval); + navigate(Routes.SongReady) + return 100; + } + return prevProgress + 1; + }); + }, 100); + + return () => clearInterval(interval); + } + }, [active]); + + return ( + + + + + + + + console.log("Pressed")} + > + + + + + Ton texte est{"\n"}en cours de création + + + + + {progress}% + + + navigate(Routes.SongReady)} + /> + + + + + + ); +}; + +export default CreatingSong; diff --git a/src/screens/Studio/CustomizeVoice.js b/src/screens/Studio/CustomizeVoice.js new file mode 100644 index 0000000..12d0b54 --- /dev/null +++ b/src/screens/Studio/CustomizeVoice.js @@ -0,0 +1,92 @@ +import { View, Text, FlatList, StyleSheet } from "react-native"; +import React, { useState } from "react"; +import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader"; +import ItemContainer from "../../components/ItemContainer/ItemContainer"; +import { Palette, Style } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import { BlurView } from "expo-blur"; + +const CustomizeVoice = () => { + const [containerLayout, setContainerLayout] = useState(null); + + return ( + + + setContainerLayout(event.nativeEvent.layout)} + > + + + + Base + + ( + + + Une voix féminine interpretra ta chanson. + + + )} + /> + + + + + ); +}; + +export default CustomizeVoice; + +const styles = StyleSheet.create({ + contentContainer: { + flexGrow: 1, + padding: 8, + gap: 10, + backgroundColor: "#FFFFFF00", + paddingBottom: 50, + }, + 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, + }, +}); diff --git a/src/screens/Studio/SongReady.js b/src/screens/Studio/SongReady.js new file mode 100644 index 0000000..0be8a40 --- /dev/null +++ b/src/screens/Studio/SongReady.js @@ -0,0 +1,47 @@ +import { View, Text } from "react-native"; +import React from "react"; +import Page from "../../layouts/Page"; +import { background } from "../../assets"; +import MusicLandHeader from "../../components/MusicLandHeader"; +import { goBack } from "../../navigation/NavigationService"; +import { LinearGradient } from "../../components/LinearGradient/LinearGradient"; +import Slider from "../../components/Slider"; + +const SongReady = () => { + return ( + + + + + + + + + + + ); +}; + +export default SongReady; diff --git a/src/screens/Studio/Studio.js b/src/screens/Studio/Studio.js index b103cd4..fbee492 100644 --- a/src/screens/Studio/Studio.js +++ b/src/screens/Studio/Studio.js @@ -20,7 +20,7 @@ const Studio = () => { navigate(Routes.ComposeSong)} + onPress={() => navigate(Routes.Compose)} /> diff --git a/src/screens/Writing/CreateLyricsWithAi.js b/src/screens/Writing/CreateLyricsWithAi.js index de2d37f..167e251 100644 --- a/src/screens/Writing/CreateLyricsWithAi.js +++ b/src/screens/Writing/CreateLyricsWithAi.js @@ -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} /> - - + + setparentLayout(e.nativeEvent.layout)} + > { @@ -74,7 +83,7 @@ const CreateLyricsWithAi = () => { @@ -83,7 +92,7 @@ const CreateLyricsWithAi = () => { @@ -92,7 +101,7 @@ const CreateLyricsWithAi = () => { @@ -101,7 +110,7 @@ const CreateLyricsWithAi = () => { @@ -110,7 +119,7 @@ const CreateLyricsWithAi = () => { @@ -119,7 +128,7 @@ const CreateLyricsWithAi = () => { @@ -128,7 +137,7 @@ const CreateLyricsWithAi = () => { @@ -137,7 +146,7 @@ const CreateLyricsWithAi = () => { diff --git a/src/screens/Writing/CreatingLyrics.js b/src/screens/Writing/CreatingLyrics.js index 7a0f499..c2a7d67 100644 --- a/src/screens/Writing/CreatingLyrics.js +++ b/src/screens/Writing/CreatingLyrics.js @@ -19,6 +19,7 @@ const CreatingLyrics = ({ active }) => { setProgress((prevProgress) => { if (prevProgress >= 100) { clearInterval(interval); + navigate(Routes.Lyrics) return 100; } return prevProgress + 1; diff --git a/src/screens/Writing/CustomizeSongStructure.js b/src/screens/Writing/CustomizeSongStructure.js index 949e10f..7603518 100644 --- a/src/screens/Writing/CustomizeSongStructure.js +++ b/src/screens/Writing/CustomizeSongStructure.js @@ -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 ( { subTitle="Intègre en Drag and drop" /> - { + setContainerLayout(e.nativeEvent.layout); }} - style={styles.borderGradientStyle} > - - - - {Array.from({ length: 10 }).map((_, index) => ( - - Couplet - - ))} - - - - - - - - - {Array.from({ length: 10 }).map((_, index) => ( - - - Introduction instrumentale longue. - - - ))} - - - - + + + {Array.from({ length: 10 }).map((_, index) => ( + + Couplet + + ))} + + + + + + + {Array.from({ length: 10 }).map((_, index) => ( + + + + Introduction instrumentale longue. + + + + ))} + + + ); @@ -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, diff --git a/src/screens/Writing/EmotionConvey.js b/src/screens/Writing/EmotionConvey.js index e2e5e87..f2fc6c6 100644 --- a/src/screens/Writing/EmotionConvey.js +++ b/src/screens/Writing/EmotionConvey.js @@ -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)" /> - - + - { - e.persist(); - setContainerLayout(e.nativeEvent.layout); - }} - > - ( - - - { - e.persist(); - setItemLayout((prev) => [...prev, e.nativeEvent.layout]); - }} + renderItem={({ item, index }) => ( + + + { + e.persist(); + setItemLayout((prev) => [...prev, e.nativeEvent.layout]); + }} + > + - - - - {item.title} - {" "} - : {item.description} - - - + + {item.title} + {" "} + : {item.description} + + - )} - /> - - + + )} + /> + ); }; 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), - }, -}); diff --git a/src/screens/Writing/FinishedWriting.js b/src/screens/Writing/FinishedWriting.js index f53c344..abf239d 100644 --- a/src/screens/Writing/FinishedWriting.js +++ b/src/screens/Writing/FinishedWriting.js @@ -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"; diff --git a/src/screens/Writing/Goals.js b/src/screens/Writing/Goals.js index 42085e8..498dfb0 100644 --- a/src/screens/Writing/Goals.js +++ b/src/screens/Writing/Goals.js @@ -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 ( - - - - ( - - - {item} - - - )} - /> - - - + + ( + + + {item} + + + )} + /> + { 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", }, }); diff --git a/src/screens/Writing/Lyrics.js b/src/screens/Writing/Lyrics.js index e53226e..95059a3 100644 --- a/src/screens/Writing/Lyrics.js +++ b/src/screens/Writing/Lyrics.js @@ -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 ( - - - - - setContainerLayout(e.nativeEvent.layout)} + > + + + + + - - - - Introduction instrumentale longue - - - - - - - - + Introduction instrumentale longue + + + + + + { }; export default Lyrics; - -const styles = StyleSheet.create({ - borderGradientStyle: { - height: "100%", - borderWidth: 1, - borderRadius: 20, - }, -}); diff --git a/src/screens/Writing/Rhymes.js b/src/screens/Writing/Rhymes.js index 852c525..d83565a 100644 --- a/src/screens/Writing/Rhymes.js +++ b/src/screens/Writing/Rhymes.js @@ -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 ( - - - { - e.persist(); - setContainerLayout(e.nativeEvent.layout); - }} - > + + {Array.from({ length: 3 }).map((_, index) => ( { ))} - - + + ); }; @@ -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), - }, }); diff --git a/src/screens/Writing/SongStructure.js b/src/screens/Writing/SongStructure.js index 54b5862..029e76c 100644 --- a/src/screens/Writing/SongStructure.js +++ b/src/screens/Writing/SongStructure.js @@ -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 ( - - - - ( - - - {item} - - - )} - /> - - - + + ( + + + {item} + + + )} + /> + ); }; @@ -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, diff --git a/src/screens/Writing/SongStyle.js b/src/screens/Writing/SongStyle.js index 6e6bf02..9323a52 100644 --- a/src/screens/Writing/SongStyle.js +++ b/src/screens/Writing/SongStyle.js @@ -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." /> - - - - ( - - - {item} - - - )} - /> - - - + + ( + + + {item} + + + )} + /> + { 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", }, }); diff --git a/src/screens/Writing/SpecificityContext.js b/src/screens/Writing/SpecificityContext.js index 9c7a77c..e810fb8 100644 --- a/src/screens/Writing/SpecificityContext.js +++ b/src/screens/Writing/SpecificityContext.js @@ -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 ( diff --git a/src/screens/Writing/WritingLyrics.js b/src/screens/Writing/WritingLyrics.js index a3a34c8..12aa40c 100644 --- a/src/screens/Writing/WritingLyrics.js +++ b/src/screens/Writing/WritingLyrics.js @@ -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"; diff --git a/src/screens/Writing/components/CreateLyricsHeader.js b/src/screens/Writing/components/CreateLyricsHeader.js index a8dbd9d..f6b372e 100644 --- a/src/screens/Writing/components/CreateLyricsHeader.js +++ b/src/screens/Writing/components/CreateLyricsHeader.js @@ -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 ( - <> + - { onLayout={(event) => { setOnLayout(event.nativeEvent.layout); }} + onPress={() => console.log("PRESSED")} > { )} - - + + ); }; diff --git a/src/screens/Writing/components/CustomInput.js b/src/screens/Writing/components/CustomInput.js index 65f21f4..99099ce 100644 --- a/src/screens/Writing/components/CustomInput.js +++ b/src/screens/Writing/components/CustomInput.js @@ -42,6 +42,7 @@ const CustomInput = ({ color: Palette.black, fontFamily: FONT_FAMILY.InterRegularItalic, }} + multiline textAlignVertical="top" />