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,120 @@
+import { View, Text, StyleSheet, ScrollView } from "react-native";
+import React 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 { FONT_FAMILY } from "../../styles/Fonts";
+
+const CustomizeSongStructure = () => {
+  return (
+    <View style={{ flex: 1, gap: 10 }}>
+      <CreateLyricsHeader
+        title="Personnalise la structure de ta chanson"
+        subTitle="Intègre en Drag and drop"
+      />
+      <View style={{ flex: 1, gap: 10 }}>
+        <BorderGradient
+          gradientProps={{
+            colors: ["#FFFFFF00", "#FFFFFF"],
+          }}
+          style={styles.borderGradientStyle}
+        >
+          <View style={styles.blurContainer}>
+            <BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
+              <ScrollView
+                contentContainerStyle={{ gap: 10, paddingBottom: 20 }}
+              >
+                {Array.from({ length: 10 }).map((_, index) => (
+                  <View key={index} style={styles.dropzoneContainer}>
+                    <Text style={styles.dropzone}>Couplet</Text>
+                  </View>
+                ))}
+              </ScrollView>
+            </BlurView>
+          </View>
+        </BorderGradient>
+        <BorderGradient
+          gradientProps={{
+            colors: ["#FFFFFF00", "#FFFFFF"],
+          }}
+          style={styles.borderGradientStyle}
+        >
+          <View style={styles.blurContainer}>
+            <BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
+              <ScrollView
+                contentContainerStyle={{ gap: 10, paddingBottom: 20 }}
+              >
+                {Array.from({ length: 10 }).map((_, index) => (
+                  <View key={index} style={styles.itemContainer}>
+                    <BlurView
+                      intensity={30}
+                      style={{
+                        flex: 1,
+                        backgroundColor: Palette.glass,
+                        justifyContent: "center",
+                        paddingHorizontal: 12,
+                      }}
+                    >
+                      <Text style={styles.dropzone}>Introduction instrumentale longue.</Text>
+                    </BlurView>
+                  </View>
+                ))}
+              </ScrollView>
+            </BlurView>
+          </View>
+        </BorderGradient>
+      </View>
+    </View>
+  );
+};
+
+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,
+    backgroundColor: "#00000080",
+    borderRadius: 14,
+  },
+  dropzone: {
+    fontSize: 16,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+  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,
+  },
+});