update

2025-08-05 21:04:28 +08:00
parent e22b87bd49
commit d08ec7b778
24 changed files with 994 additions and 78 deletions
@@ -0,0 +1,100 @@
+import { View, Text, Image, StyleSheet, ScrollView } from "react-native";
+import React 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";
+
+const Lyrics = () => {
+  return (
+    <Page headerType="NONE">
+      <MusicLandHeader onPressBack={goBack} progress={95} />
+      <View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
+        <BorderGradient
+          gradientProps={{
+            colors: ["#FFFFFF00", "#FFFFFF"],
+            start: { x: 0, y: 0 },
+            end: { x: 0, y: 1 },
+          }}
+          style={styles.borderGradientStyle}
+        >
+          <View style={{ borderRadius: 20, overflow: "hidden", flex: 1 }}>
+            <BlurView intensity={40} style={{ flex: 1 }}>
+              <ScrollView
+                contentContainerStyle={{
+                  paddingHorizontal: 14,
+                  paddingVertical: 10,
+                  gap: 10,
+                  flexGrow: 1,
+                }}
+              >
+                <CustomInput label="Titre" placeholder="Titre" height={45} />
+                <View
+                  style={{
+                    height: 45,
+                    justifyContent: "center",
+                    backgroundColor: "#00000080",
+                    borderRadius: 14,
+                    paddingHorizontal: 12,
+                    marginTop: 20,
+                  }}
+                >
+                  <Text
+                    style={{
+                      fontSize: 16,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.InterRegular,
+                    }}
+                  >
+                    Introduction instrumentale longue
+                  </Text>
+                </View>
+                <CustomInput
+                  label="Couplet"
+                  placeholder="Couplet"
+                  height={225}
+                />
+                <CustomInput
+                  label="Refrain"
+                  placeholder="Refrain"
+                  height={170}
+                />
+              </ScrollView>
+            </BlurView>
+          </View>
+        </BorderGradient>
+      </View>
+      <View
+        style={{
+          paddingBottom: gutters * 2,
+          paddingHorizontal: gutters,
+          gap: 12,
+        }}
+      >
+        <BorderGradientButton title="Générer des autres paroles" />
+        <GradientButton
+          title="Valider"
+          onPress={() => navigate(Routes.FinishedWriting)}
+        />
+      </View>
+    </Page>
+  );
+};
+
+export default Lyrics;
+
+const styles = StyleSheet.create({
+  borderGradientStyle: {
+    height: "100%",
+    borderWidth: 1,
+    borderRadius: 20,
+  },
+});