update

src/screens/Writing/SongStyle.js

@@ -1,14 +1,24 @@
 import { View, Text, FlatList, Pressable, StyleSheet } from "react-native";
-import React from "react";
+import React, { useState } from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
 import { BlurView } from "expo-blur";
-import { GOALS } from "../../data/data";
+import { GOALS, SONG_STYLE } from "../../data/data";
 import { Palette, Style } from "../../styles";
 import CustomInput from "./components/CustomInput";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const SongStyle = () => {
+  const [selected, setSelected] = useState(null);
+
+  const onPressSelect = (item) => {
+    if (selected === item) {
+      setSelected(null);
+    } else {
+      setSelected(item);
+    }
+  };
+
   return (
     <View style={{ flex: 1, gap: 16, marginTop: 16 }}>
       <View style={{ gap: 10 }}>
@@ -18,24 +28,42 @@ const SongStyle = () => {
         />
         <ItemContainer>
           <FlatList
-            data={GOALS}
+            data={SONG_STYLE}
             showsVerticalScrollIndicator={false}
             contentContainerStyle={styles.contentContainer}
-            renderItem={({ item }) => (
-              <Pressable style={styles.itemContainer}>
-                <BlurView
-                  intensity={30}
-                  style={{
-                    flex: 1,
-                    backgroundColor: Palette.glass,
-                    paddingHorizontal: 14,
-                    ...Style.containerCenter,
+            renderItem={({ item }) => {
+              const selectedItem = selected === item.title;
+
+              return (
+                <CreateLyricsHeader
+                  colors={
+                    selectedItem
+                      ? ["#FFFFFF00", "#FFFFFF"]
+                      : [Palette.tran, Palette.tran]
+                  }
+                  tint={selectedItem ? "default" : "dark"}
+                  onPress={() => onPressSelect(item.title)}
+                  containerStyle={{
+                    ...styles.itemContainer,
                   }}
                 >
-                  <Text style={styles.itemText}>{item}</Text>
-                </BlurView>
-              </Pressable>
-            )}
+                  <View style={{ paddingVertical: 6 }}>
+                    <Text
+                      style={{
+                        fontSize: 16,
+                        color: Palette.white,
+                        fontFamily: FONT_FAMILY.InterRegular,
+                      }}
+                    >
+                      <Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
+                        {item.title}
+                      </Text>{" "}
+                      : {item.description}
+                    </Text>
+                  </View>
+                </CreateLyricsHeader>
+              );
+            }}
           />
         </ItemContainer>
       </View>
@@ -58,10 +86,7 @@ const styles = StyleSheet.create({
     paddingBottom: 50,
   },
   itemContainer: {
-    height: 54,
-    backgroundColor: Palette.glass,
     borderRadius: 14,
-    overflow: "hidden",
     shadowColor: "#00000040",
     shadowOffset: {
       width: 0,