update

src/screens/Writing/CustomizeSongStructure.js

@@ -5,6 +5,8 @@ import { BlurView } from "expo-blur";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
+import { CUSTOM_SONG_STRUCTURE } from "../../data/data";
+import DragDropTest from "../../components/DragDropTest";
 
 const CustomizeSongStructure = () => {
   const [containerLayout, setContainerLayout] = useState(null);
@@ -15,7 +17,7 @@ const CustomizeSongStructure = () => {
         title="Personnalise la structure de ta chanson"
         subTitle="Intègre en Drag and drop"
       />
-      <View style={{ flex: 1, gap: 10 }}>
+      {/* <View style={{ flex: 1, gap: 10 }}>
         <View
           style={{ flex: 1 }}
           onLayout={(e) => {
@@ -24,18 +26,20 @@ const CustomizeSongStructure = () => {
         >
           <ItemContainer height={containerLayout?.height}>
             <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>
-              ))}
+              {["Couplet", "Refrain", "Couplet", "Refrain"].map(
+                (item, index) => (
+                  <View key={index} style={styles.dropzoneContainer}>
+                    <Text style={styles.dropzone}>{item}</Text>
+                  </View>
+                )
+              )}
             </ScrollView>
           </ItemContainer>
         </View>
         <View style={{ flex: 1 }}>
           <ItemContainer height={containerLayout?.height}>
             <ScrollView contentContainerStyle={{ gap: 10, paddingBottom: 20 }}>
-              {Array.from({ length: 10 }).map((_, index) => (
+              {CUSTOM_SONG_STRUCTURE.map((item, index) => (
                 <View key={index} style={styles.itemContainer}>
                   <BlurView
                     intensity={30}
@@ -46,15 +50,16 @@ const CustomizeSongStructure = () => {
                       paddingHorizontal: 12,
                     }}
                   >
-                    <Text style={styles.dropzone}>
-                      Introduction instrumentale longue.
-                    </Text>
+                    <Text style={styles.dropzone}>{item}</Text>
                   </BlurView>
                 </View>
               ))}
             </ScrollView>
           </ItemContainer>
         </View>
+      </View> */}
+      <View style={{ flex: 1 }}>
+        <DragDropTest />
       </View>
     </View>
   );