leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Philip Cesar Garay
2025-08-06 21:06:01 +08:00
parent d08ec7b778
commit 40e877774b
33 changed files with 1148 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Writing/CustomizeSongStructure.js
+42 -71
View File
@@ -1,13 +1,14 @@
import { View, Text, StyleSheet, ScrollView } from "react-native";
import React from "react";
import React, { useState } 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 { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const CustomizeSongStructure = () => {
const [containerLayout, setContainerLayout] = useState(null);
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader
@@ -15,56 +16,45 @@ const CustomizeSongStructure = () => {
subTitle="Intègre en Drag and drop"
/>
<View style={{ flex: 1, gap: 10 }}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
<View
style={{ flex: 1 }}
onLayout={(e) => {
setContainerLayout(e.nativeEvent.layout);
}}
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>
<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>
))}
</ScrollView>
</ItemContainer>
</View>
<View style={{ flex: 1 }}>
<ItemContainer height={containerLayout?.height}>
<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>
</ItemContainer>
</View>
</View>
</View>
);
@@ -73,25 +63,6 @@ const CustomizeSongStructure = () => {
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,