update

src/screens/Writing/SongStructure.js

@@ -1,13 +1,23 @@
 import { View, Text, StyleSheet, FlatList, Pressable } 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_STRUCTURE } from "../../data/data";
 import { Palette, Style } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const SongStructure = () => {
+  const [selected, setSelected] = useState(null);
+
+  const onPressSelect = (item) => {
+    if (selected === item) {
+      setSelected(null);
+    } else {
+      setSelected(item);
+    }
+  };
+
   return (
     <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
       <CreateLyricsHeader
@@ -16,23 +26,37 @@ const SongStructure = () => {
       />
       <ItemContainer>
         <FlatList
-          data={GOALS}
+          data={SONG_STRUCTURE}
           showsVerticalScrollIndicator={false}
           contentContainerStyle={styles.contentContainer}
-          renderItem={({ item }) => (
-            <Pressable style={styles.itemContainer}>
-              <BlurView
-                intensity={30}
-                style={{
-                  flex: 1,
-                  backgroundColor: Palette.glass,
-                  ...Style.containerCenter,
+          renderItem={({ item }) => {
+            const selectedItem = selected === item;
+
+            return (
+              <CreateLyricsHeader
+                onPress={() => onPressSelect(item)}
+                tint={selectedItem ? "default" : "dark"}
+                colors={
+                  selectedItem
+                    ? ["#FFFFFF00", "#FFFFFF"]
+                    : [Palette.tran, Palette.tran]
+                }
+                containerStyle={{
+                  ...styles.itemContainer,
                 }}
               >
-                <Text style={styles.itemText}>{item}</Text>
-              </BlurView>
-            </Pressable>
-          )}
+                <View
+                  style={{
+                    height: 40,
+                    paddingHorizontal: 14,
+                    justifyContent: "center",
+                  }}
+                >
+                  <Text style={styles.itemText}>{item}</Text>
+                </View>
+              </CreateLyricsHeader>
+            );
+          }}
         />
       </ItemContainer>
     </View>
@@ -51,9 +75,7 @@ const styles = StyleSheet.create({
   },
   itemContainer: {
     height: 54,
-    backgroundColor: Palette.glass,
     borderRadius: 14,
-    overflow: "hidden",
     shadowColor: "#00000040",
     shadowOffset: {
       width: 0,