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-05 21:04:28 +08:00
parent e22b87bd49
commit d08ec7b778
24 changed files with 994 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Writing/EmotionConvey.js
+73 -59
View File
@@ -1,4 +1,4 @@
import { View, Text, StyleSheet, FlatList } from "react-native";
import { View, Text, StyleSheet, FlatList, Pressable } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
@@ -6,75 +6,88 @@ import { responsiveHeight } from "react-native-responsive-dimensions";
import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { EMOTION_CONVEY } from "../../data/data";
const EmotionConvey = () => {
const [containerLayout, setContainerLayout] = useState(null);
const [itemLayout, setItemLayout] = useState([]);
console.log("itemLayout: ", itemLayout);
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader
title={`Quel émotion veux-tu\ntransmettre ?`}
subTitle="Sélectionne tes intentions émotionnelles. (2 max)"
/>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={styles.borderGradientStyle}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
<FlatList
data={Array.from({ length: 3 })}
contentContainerStyle={{ gap: 16 }}
renderItem={({ item, index }) => (
<View>
<BorderGradient
gradientProps={{
colors: ["#FBFF00", "#99999900"],
}}
style={{
borderWidth: 1,
height: itemLayout[index]?.height,
borderRadius: 14,
position: "absolute",
width: "100%",
}}
/>
<View
style={{ borderRadius: 14, overflow: "hidden" }}
onLayout={(e) => {
e.persist();
setItemLayout((prev) => [...prev, e.nativeEvent.layout]);
}}
<View style={styles.blurContainer}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={{
...styles.borderGradientStyle,
height: containerLayout?.height,
}}
/>
<BlurView
intensity={40}
style={{ padding: 6, zIndex: 2, }}
onLayout={(e) => {
e.persist();
setContainerLayout(e.nativeEvent.layout);
}}
>
<FlatList
data={EMOTION_CONVEY}
contentContainerStyle={{
gap: 16,
flexGrow: 1,
zIndex: 2,
}}
renderItem={({ item, index }) => (
<View>
<BorderGradient
gradientProps={{
colors: item.color,
}}
style={{
borderWidth: 1,
height: itemLayout[index]?.height,
borderRadius: 14,
position: "absolute",
width: "100%",
}}
/>
<View
style={{ borderRadius: 14, overflow: "hidden" }}
onLayout={(e) => {
e.persist();
setItemLayout((prev) => [...prev, e.nativeEvent.layout]);
}}
>
<BlurView
intensity={30}
style={{ paddingVertical: 14, paddingHorizontal: 12 }}
>
<BlurView
intensity={30}
style={{ paddingVertical: 14, paddingHorizontal: 12 }}
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
La Joie
</Text>{" "}
: expose un bonheur profond, l'émerveillement, la
gratitude, satisfaction intense, énergie positive.
</Text>
</BlurView>
</View>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</BlurView>
</View>
)}
/>
</BlurView>
</View>
</BorderGradient>
</View>
)}
/>
</BlurView>
</View>
</View>
);
};
@@ -85,7 +98,6 @@ const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
height: responsiveHeight(55),
shadowColor: "#000",
shadowOffset: {
width: 0,
@@ -94,11 +106,13 @@ const styles = StyleSheet.create({
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
position: "absolute",
width: "100%",
},
blurContainer: {
flex: 1,
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
maxHeight: responsiveHeight(55),
},
});