update

src/screens/Studio/CustomizeVoice.js

@@ -1,4 +1,4 @@
-import { View, Text, FlatList, StyleSheet } from "react-native";
+import { View, Text, FlatList, StyleSheet, SectionList } from "react-native";
 import React, { useState } from "react";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
@@ -9,6 +9,15 @@ import { VOICE } from "../../data/data";
 
 const CustomizeVoice = () => {
   const [containerLayout, setContainerLayout] = useState(null);
+  const [selected, setSelected] = useState(null);
+
+  const onPressSelect = (item) => {
+    if (selected === item) {
+      setSelected(null);
+    } else {
+      setSelected(item);
+    }
+  };
 
   return (
     <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
@@ -22,35 +31,47 @@ const CustomizeVoice = () => {
       >
         <ItemContainer height={containerLayout?.height}>
           <View style={{ flex: 1, gap: 10 }}>
-            <Text
-              style={{
-                fontSize: 16,
-                color: Palette.white,
-                fontFamily: FONT_FAMILY.InterBold,
-                left: 16,
-                marginTop: 5,
-              }}
-            >
-              Base
-            </Text>
-            <FlatList
-              data={VOICE}
+            <SectionList
+              sections={VOICE}
               showsVerticalScrollIndicator={false}
               contentContainerStyle={styles.contentContainer}
-              renderItem={({ item }) => (
-                <View style={styles.itemContainer}>
-                  <BlurView
-                    intensity={30}
-                    style={{
-                      flex: 1,
-                      backgroundColor: Palette.glass,
-                      paddingHorizontal: 12,
-                      paddingVertical: 14,
+              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>
-                </View>
+                    <View
+                      style={{
+                        paddingVertical: 6,
+                      }}
+                    >
+                      <Text style={styles.itemText}>{item}</Text>
+                    </View>
+                  </CreateLyricsHeader>
+                );
+              }}
+              renderSectionHeader={({ section: { title } }) => (
+                <Text
+                  style={{
+                    fontSize: 16,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterBold,
+                    left: 10,
+                  }}
+                >
+                  {title}
+                </Text>
               )}
             />
           </View>