update

src/screens/Writing/CreateLyricsWithAi.js

@@ -10,17 +10,25 @@ import Goals from "./Goals";
 import { goBack } from "../../navigation/NavigationService";
 import SpecificityContext from "./SpecificityContext";
 import EmotionConvey from "./EmotionConvey";
+import SongStyle from "./SongStyle";
+import SongTo from "./SongTo";
+import SongStructure from "./SongStructure";
+import CustomizeSongStructure from "./CustomizeSongStructure";
+import Rhymes from "./Rhymes";
+import CreatingLyrics from "./CreatingLyrics";
 
 const { width } = Dimensions.get("window");
 
 const CreateLyricsWithAi = () => {
   const scrollRef = useRef(null);
   const [selectedIndex, setSelectedIndex] = useState(0);
-  const [progress, setProgress] = useState(8);
+  const [progress, setProgress] = useState(16);
+
+  console.log("progress: ", progress);
 
   const onPressNext = () => {
     setSelectedIndex(selectedIndex + 1);
-    setProgress(progress + 8);
+    setProgress(progress + 9);
     scrollRef.current.scrollToIndex({
       index: selectedIndex + 1,
       animated: true,
@@ -30,7 +38,7 @@ const CreateLyricsWithAi = () => {
   const onPressBack = () => {
     if (selectedIndex > 0) {
       setSelectedIndex(selectedIndex - 1);
-      setProgress(progress - 8);
+      setProgress(progress - 9);
       scrollRef.current.scrollToIndex({
         index: selectedIndex - 1,
         animated: true,
@@ -42,7 +50,11 @@ const CreateLyricsWithAi = () => {
 
   return (
     <Page headerType="NONE">
-      <MusicLandHeader onPressBack={onPressBack} progress={progress} />
+      <MusicLandHeader
+        onPressBack={onPressBack}
+        progress={progress}
+        showSkip={selectedIndex === 4}
+      />
       <View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
         <View style={{ flex: 1 }}>
           <SwiperFlatList
@@ -77,9 +89,65 @@ const CreateLyricsWithAi = () => {
             >
               <EmotionConvey />
             </View>
+            <View
+              style={{
+                width: width,
+                height: "100%",
+                paddingHorizontal: gutters,
+              }}
+            >
+              <SongStyle />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: "100%",
+                paddingHorizontal: gutters,
+              }}
+            >
+              <SongTo />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: "100%",
+                paddingHorizontal: gutters,
+              }}
+            >
+              <SongStructure />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: "100%",
+                paddingHorizontal: gutters,
+              }}
+            >
+              <CustomizeSongStructure />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: "100%",
+                paddingHorizontal: gutters,
+              }}
+            >
+              <Rhymes />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: "100%",
+                paddingHorizontal: gutters,
+              }}
+            >
+              <CreatingLyrics active={selectedIndex === 8} />
+            </View>
           </SwiperFlatList>
         </View>
-        <GradientButton title="Suivant" onPress={onPressNext} />
+        {selectedIndex !== 8 && (
+          <GradientButton title="Suivant" onPress={onPressNext} />
+        )}
       </View>
     </Page>
   );