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,105 @@
+import { View, Text, FlatList, StyleSheet, Pressable } from "react-native";
+import React from "react";
+import CreateLyricsHeader from "./components/CreateLyricsHeader";
+import BorderGradient from "../../components/BorderGradient/BorderGradient";
+import { Palette, Style } from "../../styles";
+import { BlurView } from "expo-blur";
+import { GOALS } from "../../data/data";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import CustomInput from "./components/CustomInput";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+
+const Goals = () => {
+  return (
+    <View style={{ flex: 1, gap: 16 }}>
+      <View style={{ gap: 10 }}>
+        <CreateLyricsHeader title="Quels sont tes objectifs ?" />
+        <BorderGradient
+          gradientProps={{
+            colors: ["#FFFFFF00", "#FFFFFF"],
+          }}
+          style={styles.borderGradientStyle}
+        >
+          <View style={styles.blurContainer}>
+            <BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
+              <FlatList
+                data={GOALS}
+                showsVerticalScrollIndicator={false}
+                contentContainerStyle={styles.contentContainer}
+                renderItem={({ item }) => (
+                  <Pressable style={styles.itemContainer}>
+                    <BlurView
+                      intensity={30}
+                      style={{
+                        flex: 1,
+                        backgroundColor: Palette.glass,
+                        ...Style.containerCenter,
+                      }}
+                    >
+                      <Text style={styles.itemText}>{item}</Text>
+                    </BlurView>
+                  </Pressable>
+                )}
+              />
+            </BlurView>
+          </View>
+        </BorderGradient>
+      </View>
+      <CustomInput
+        label="Tu as un autre objectif?"
+        placeholder="Décrire l’objectif"
+      />
+    </View>
+  );
+};
+
+export default Goals;
+
+const styles = StyleSheet.create({
+  borderGradientStyle: {
+    borderWidth: 1,
+    borderRadius: 20,
+    height: responsiveHeight(40),
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 100,
+  },
+  blurContainer: {
+    flex: 1,
+    borderRadius: 20,
+    overflow: "hidden",
+    zIndex: 1,
+  },
+  contentContainer: {
+    flexGrow: 1,
+    padding: 8,
+    gap: 10,
+    backgroundColor: "#FFFFFF00",
+    paddingBottom: 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,
+  },
+  itemText: {
+    fontSize: 16,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+});