Philip Cesar Garay
100 lines
2.6 KiB
JavaScript
100 lines
2.6 KiB
JavaScript
import { View, Text, StyleSheet } from "react-native";
|
|
import React, { useState } from "react";
|
|
import CreateLyricsHeader from "./components/CreateLyricsHeader";
|
|
import { BlurView } from "expo-blur";
|
|
import { Palette } from "../../styles";
|
|
import { FONT_FAMILY } from "../../styles/Fonts";
|
|
import BorderGradient from "../../components/BorderGradient/BorderGradient";
|
|
import { responsiveHeight } from "react-native-responsive-dimensions";
|
|
|
|
const Rhymes = () => {
|
|
const [containerLayout, setContainerLayout] = useState(null);
|
|
|
|
return (
|
|
<View style={{ flex: 1, gap: 10 }}>
|
|
<CreateLyricsHeader title="Avec ou sans rimes" />
|
|
<View style={styles.blurContainer}>
|
|
<BorderGradient
|
|
gradientProps={{
|
|
colors: ["#FFFFFF00", "#FFFFFF"],
|
|
}}
|
|
style={{
|
|
...styles.borderGradientStyle,
|
|
height: containerLayout?.height,
|
|
}}
|
|
/>
|
|
<BlurView
|
|
intensity={40}
|
|
style={{ padding: 6, zIndex: 2, gap: 10 }}
|
|
onLayout={(e) => {
|
|
e.persist();
|
|
setContainerLayout(e.nativeEvent.layout);
|
|
}}
|
|
>
|
|
{Array.from({ length: 3 }).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>
|
|
))}
|
|
</BlurView>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default Rhymes;
|
|
|
|
const styles = StyleSheet.create({
|
|
borderGradientStyle: {
|
|
borderWidth: 1,
|
|
borderRadius: 20,
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3.84,
|
|
elevation: 100,
|
|
position: "absolute",
|
|
width: "100%",
|
|
},
|
|
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,
|
|
},
|
|
dropzone: {
|
|
fontSize: 16,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
},
|
|
blurContainer: {
|
|
borderRadius: 20,
|
|
overflow: "hidden",
|
|
zIndex: 1,
|
|
maxHeight: responsiveHeight(55),
|
|
},
|
|
});
|