update

src/screens/Writing/Rhymes.js

@@ -1,34 +1,58 @@
 import { View, Text, StyleSheet } from "react-native";
-import React from "react";
+import React, { useState } from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
 import { BlurView } from "expo-blur";
-import { Palette } from "../../styles";
+import { Palette, Style } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const Rhymes = () => {
+  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 title="Avec ou sans rimes" />
       <ItemContainer height={200}>
         <View style={{ gap: 10 }}>
-          {Array.from({ length: 3 }).map((_, index) => (
-            <View key={index} style={styles.itemContainer}>
-              <BlurView
-                intensity={30}
-                style={{
-                  flex: 1,
-                  backgroundColor: Palette.glass,
-                  justifyContent: "center",
-                  paddingHorizontal: 12,
-                }}
-              >
-                <Text style={styles.dropzone}>
-                  Introduction instrumentale longue.
-                </Text>
-              </BlurView>
-            </View>
-          ))}
+          {["Avec rimes", "Sans rimes", "Mélange des deux"].map(
+            (item, index) => {
+              const selectedItem = selected === item;
+
+              return (
+                <CreateLyricsHeader
+                  key={index}
+                  onPress={() => onPressSelect(item)}
+                  tint={selectedItem ? "default" : "dark"}
+                  colors={
+                    selectedItem
+                      ? ["#FFFFFF00", "#FFFFFF"]
+                      : [Palette.tran, Palette.tran]
+                  }
+                  containerStyle={{
+                    ...styles.itemContainer,
+                  }}
+                >
+                  <View
+                    style={{
+                      height: 40,
+                      ...Style.containerCenter,
+                      paddingHorizontal: 14,
+                    }}
+                  >
+                    <Text style={styles.dropzone}>{item}</Text>
+                  </View>
+                </CreateLyricsHeader>
+              );
+            }
+          )}
         </View>
       </ItemContainer>
     </View>
@@ -56,5 +80,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: Palette.white,
     fontFamily: FONT_FAMILY.InterRegular,
+    textAlign: "center",
   },
 });