update

2025-08-06 21:06:01 +08:00
parent d08ec7b778
commit 40e877774b
33 changed files with 1148 additions and 517 deletions
@@ -0,0 +1,76 @@
+import { View, Text, StyleSheet, FlatList } from "react-native";
+import React from "react";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { BlurView } from "expo-blur";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { Palette } from "../../styles";
+import { CHOOSE_GENRE } from "../../data/data";
+import ItemContainer from "../../components/ItemContainer/ItemContainer";
+
+const ChooseGenre = () => {
+  return (
+    <View style={{ flex: 1, gap: 10 }}>
+      <CreateLyricsHeader
+        title="Choisis un genre"
+        subTitle="Tu peux choisir jusqu’à 2 genres différents"
+      />
+      <ItemContainer height={responsiveHeight(55)}>
+        <FlatList
+          data={CHOOSE_GENRE}
+          contentContainerStyle={{
+            gap: 16,
+            flexGrow: 1,
+            zIndex: 2,
+          }}
+          renderItem={({ item, index }) => (
+            <View style={{ borderRadius: 14, overflow: "hidden" }}>
+              <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 }}>
+                    {item.title}
+                  </Text>{" "}
+                  : {item.description}
+                </Text>
+              </BlurView>
+            </View>
+          )}
+        />
+      </ItemContainer>
+    </View>
+  );
+};
+
+export default ChooseGenre;
+
+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%",
+  },
+  blurContainer: {
+    borderRadius: 20,
+    overflow: "hidden",
+    zIndex: 1,
+    maxHeight: responsiveHeight(55),
+  },
+});