update

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 (
     <Page headerType="NONE" backgroundImg={background.studioBG2}>
-      <MusicLandHeader onPressBack={goBack} progress={49.7} />
-
-      <View>
-        <LinearGradient
-          colors={["#FF0000", "#FFFF00", "#0000FF"]} // Red to Yellow to Blue gradient
-          start={{ x: 0, y: 0.5 }}
-          end={{ x: 1, y: 0.5 }}
+      <MusicLandHeader onPressBack={goBack} progress={63} />
+      <View style={{ flex: 1, marginTop: 16 }}>
+        <CreateLyricsHeader
+          title="Ta chanson est prête !"
+          subTitle="Qu’en penses-tu ?"
+        />
+        <View
           style={{
-            width: "100%",
-            height: 40,
-            borderRadius: 20, // Optional: for rounded corners
+            ...size({ size: responsiveWidth(80) }),
+            alignSelf: "center",
+            borderRadius: 1000,
+            overflow: "hidden",
+            marginTop: 16,
           }}
         >
-          <Slider
-            style={{ height: 40, width: "100%" }}
-            minimumValue={0}
-            maximumValue={100}
-            minimumTrackTintColor="transparent"
-            maximumTrackTintColor="red"
-            thumbTintColor="#FFFFFF"
-          />
-        </LinearGradient>
-        <Slider
-          minimumValue={0}
-          maximumValue={100}
-          minimumTrackTintColor="transparent"
-          maximumTrackTintColor="red"
-          thumbTintColor="#FFFFFF"
+          <BlurView
+            intensity={40}
+            tint="dark"
+            style={{ ...Style.containerCenter, flex: 1 }}
+          >
+            <Image source={icons.disk} />
+          </BlurView>
+        </View>
+        <View style={{ marginTop: 49 }}>
+          <Slider value="0" maxValue="2:11" />
+          <Pressable
+            style={{
+              alignSelf: "center",
+              ...size({ size: 48 }),
+              ...Style.containerCenter,
+            }}
+          >
+            <Image source={icons.play} />
+          </Pressable>
+        </View>
+      </View>
+      <View
+        style={{
+          paddingBottom: gutters * 2,
+          width: "80%",
+          alignSelf: "center",
+          gap: 12,
+        }}
+      >
+        <BorderGradientButton
+          title="Regénérer"
+          icon={icons.stars}
+          onPress={() =>
+            navigate(Routes.Regenerate, {
+              progress: 63,
+            })
+          }
+        />
+        <GradientButton
+          title="Valider"
+          onPress={() => setShowValidateModal(true)}
         />
       </View>
+      <ValidateModal
+        visible={showValidateModal}
+        onClose={() => setShowValidateModal(false)}
+        onPressValidate={() => navigate(Routes.PouchReady)}
+      />
     </Page>
   );
 };