update

src/screens/Studio/ChooseInstruments.js

@@ -9,6 +9,15 @@ import { INSTRUMENTS } from "../../data/data";
 
 const ChooseInstruments = () => {
   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 }}>
@@ -25,21 +34,33 @@ const ChooseInstruments = () => {
             data={INSTRUMENTS}
             showsVerticalScrollIndicator={false}
             contentContainerStyle={styles.contentContainer}
-            renderItem={({ item }) => (
-              <View style={styles.itemContainer}>
-                <BlurView
-                  intensity={30}
-                  style={{
-                    flex: 1,
-                    backgroundColor: Palette.glass,
-                    paddingHorizontal: 12,
-                    justifyContent: "center",
+            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={{
+                      height: 40,
+                      justifyContent: "center",
+                    }}
+                  >
+                    <Text style={styles.itemText}>{item}</Text>
+                  </View>
+                </CreateLyricsHeader>
+              );
+            }}
           />
         </ItemContainer>
       </View>