update

2025-08-01 21:05:44 +08:00
parent 84fc719a10
commit e22b87bd49
18 changed files with 500 additions and 14 deletions
@@ -0,0 +1,104 @@
+import { View, Text, StyleSheet, FlatList } from "react-native";
+import React, { useState } from "react";
+import CreateLyricsHeader from "./components/CreateLyricsHeader";
+import BorderGradient from "../../components/BorderGradient/BorderGradient";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { BlurView } from "expo-blur";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+
+const EmotionConvey = () => {
+  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]);
+                    }}
+                  >
+                    <BlurView
+                      intensity={30}
+                      style={{ paddingVertical: 14, paddingHorizontal: 12 }}
+                    >
+                      <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>
+                </View>
+              )}
+            />
+          </BlurView>
+        </View>
+      </BorderGradient>
+    </View>
+  );
+};
+
+export default EmotionConvey;
+
+const styles = StyleSheet.create({
+  borderGradientStyle: {
+    borderWidth: 1,
+    borderRadius: 20,
+    height: responsiveHeight(55),
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 100,
+  },
+  blurContainer: {
+    flex: 1,
+    borderRadius: 20,
+    overflow: "hidden",
+    zIndex: 1,
+  },
+});